当前希望写一个单选框，选中“paste”则显示粘贴框，选中“upload”则提示选择文件。

因为这两种情况只是显示不同，所以只需要用javascript来进行显示和隐藏。

最后的结果大概这样：

初始时，两个都不选中，所以粘贴框和上传按钮都不存在。

选中Paste Input：粘贴框弹出，有删除按钮和行数计数。（这个在结尾作为彩蛋更新）

选中Upload File：上传按钮出现。（这个中文显示貌似跟随系统，再更新我会改掉 ）不会改：）

代码其实naive，如下：

function onClickInputMethod() {
    var show = "";
    var apm = document.getElementsByName("input_method_option");
    for (var i = 0; i < apm.length; i++) {
        if (apm[i].checked)
            show = apm[i].value;
    }
    switch (show) {
        case "0":
            document.getElementById("paste_textarea").style.display = "block";
            document.getElementById("upload_file").style.display = "none";
            break;
        case "1":
            document.getElementById("paste_textarea").style.display = "none";
            document.getElementById("upload_file").style.display = "block";
            break;
        default:
            document.getElementById("paste_textarea").style.display = "none";
            document.getElementById("upload_file").style.display = "none";
            break;
    }
}

重点是display写none的时候是隐藏，写block的时候是显示：）

我觉得也就是我脑残到写反了：）

另外，在html中，粘贴框和上传文件都要写，并且需要把display设置为none来隐藏。这跟default是无关的，

因为初始时并未点击，所以没有onClickInputMethod()的处理：）

下面贴html代码

 <div class="form-group">
                    <label for="input_method" class="col-sm-2 control-label">Input Method</label>
                    <div class="radio col-sm-10" name="input_method">
                        <label><input type="radio" name="input_method_option" value="0" onclick="onClickInputMethod(); checked" />Paste Input</label>
                        <label><input type="radio" name="input_method_option" value="1" onclick="onClickInputMethod()" />Upload File</label>
                        <!--hide when upload checked-->
                        <div class="form-group" style="margin:0.5% 0.5% 1% 0%; display: none;" id="paste_textarea">
                            <textarea class="form-control" name="paste_input" onkeypress="handleRowNum(event)" id="paste_input" rows="4"></textarea>
                            <span>
                                <button type="button" style="margin-top:0.5%;" class="btn btn-primary" onclick="onClickDelete()">Delete</button>
                                <label>Target Count: <span id="target_count">0</span></label>
                            </span>
                        </div>
                        <!--hide when paste checked-->
                        <div class="form-group" style="margin:0.5% 0.5% 1% 0%; display: none;" id="upload_file">
                            <input type="file" name="files" />
                        </div>

                    </div>
                </div>

// 这个代码插入得真丑：）

 

 

彩蛋彩蛋

清空textarea只要一行代码：

function onClickDelete() {
    $("#paste_input").val("");
    // target_count是统计行数的，当然我这里需要统计序列，和行数还不一样。  
    document.getElementById("target_count").innerHTML = 0;
}

 

版权声明：本文为pxy7896原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/pxy7896/p/9913474.html