使用javascript和html使字段出现/消失

Making fields appear/ disappear using javascript and html

本文关键字：消失 字段 javascript html 使用      更新时间：2023-09-26

我正在创建一些单选按钮，当我点击其中一个字段出现。我的问题是，当我点击下一个按钮，从前一个字段留在屏幕上，而我需要他们消失。这是我写的代码，我知道我失败的原因是它从来没有在我的javascript函数中输入else语句。有人能帮助我吗，我是这两种语言的新手，有没有办法保持以前的值发送给函数，以便我可以比较它的else语句?任何其他解决方案也会很受欢迎!

<HTML>
<HEAD> <title> Ticket Choice </title></HEAD>
<BODY>
<FORM>
<SCRIPT type="text/javascript">
    function IsCheck(but_Check, if_Check){
        if (document.getElementById(but_Check).checked) {
            document.getElementById(if_Check).style.display = 'block';
        }
        else document.getElementById(if_Check).style.display = 'none';
    }
</SCRIPT>
<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck1&quot;,&quot;ifChecked1&quot;);" name = "plane" id = "buttonCheck1"> PLANE <br>
    <div id = "ifChecked1" style="display:none">
        <label for = "depart">Departure:</label> 
        <input type = "text" id = "depart" name = "depart_plane" maxlength = "200"><br>
        <label for = "dest">Destination:</label> 
        <input type = "text" id = "dest" name = "destination_plane" maxlength = "200"><br>
    </div>
<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck2&quot;,&quot;ifChecked2&quot;);" name = "plane" id = "buttonCheck2"> SHIP <br>
    <div id = "ifChecked2" style="display:none">
        <label for = "depart">Departure:</label> 
        <input type = "text" id = "depart" name = "depart_ship" maxlength = "200"><br>
        <label for = "dest">Destination:</label> 
        <input type = "text" id = "dest" name = "destination_ship" maxlength = "200"><br>
    </div>
<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck3&quot;,&quot;ifChecked3&quot;);" name = "plane" id = "buttonCheck3"> O.S.E <br>
    <div id = "ifChecked3" style="display:none">
        <label for = "depart">Departure:</label> 
        <input type = "text" id = "depart" name = "depart_ose" maxlength = "200"><br>
        <label for = "dest">Destination:</label> 
        <input type = "text" id = "dest" name = "destination_ose" maxlength = "200"><br>
    </div>
</FORM>
</BODY>
</HTML>

这个条件永远不会进入else语句，因为每次你点击一个单选，它都会被检查。

不如试试这样:

<input type = "radio" onclick = "IsCheck(1);" name = "plane" id = "buttonCheck1"> PLANE <br>
<div id = "ifChecked1" style="display:none">
    <label for = "depart">Departure:</label>
    <input type = "text" id = "depart" name = "depart_plane" maxlength = "200"><br>
    <label for = "dest">Destination:</label>
    <input type = "text" id = "dest" name = "destination_plane" maxlength = "200"><br>
</div>
<input type = "radio" onclick = "IsCheck(2);" name = "plane" id = "buttonCheck2"> SHIP <br>
<div id = "ifChecked2" style="display:none">
    <label for = "depart">Departure:</label>
    <input type = "text" id = "depart" name = "depart_ship" maxlength = "200"><br>
    <label for = "dest">Destination:</label>
    <input type = "text" id = "dest" name = "destination_ship" maxlength = "200"><br>
</div>
<input type = "radio" onclick = "IsCheck(3);" name = "plane" id = "buttonCheck3"> O.S.E <br>
<div id = "ifChecked3" style="display:none">
    <label for = "depart">Departure:</label>
    <input type = "text" id = "depart" name = "depart_ose" maxlength = "200"><br>
    <label for = "dest">Destination:</label>
    <input type = "text" id = "dest" name = "destination_ose" maxlength = "200"><br>
</div>
JavaScript: 

function IsCheck(number){
//here we iterate the three divs
for(i = 1; i <= 3; i++){
    //if the current number (i) is different to the checked input (number)
    if (i != number) {
        document.getElementById('ifChecked'+i).style.display = 'none';
    }
    else {
        document.getElementById('ifChecked'+i).style.display = 'block';
    }
}}
相关文章：