Question

我最近开始学习JavaScript，并对复选框属性有疑问。

我要添加昵称功能，即如果某人想输入他/她的昵称，他/她可以选中该复选框，然后出现“昵称”文本框。但是，在加载页面时，即使未选中该复选框，也存在文本框。有人可以帮我解决这个问题吗？？

<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>

<div id= "nick">
    <label for = "nickname">Nickname:</label>
    <input type="text" name="nickname" id="nickname"><br/>
</div>

<input type="submit" value="Vertify"/>

<script type="text/javascript">
    function nicknameFunction() {
        if (document.getElementById('yesNick').checked){
            document.getElementById('nick').style.display="inline";
            document.getElementById('nickname').setAttribute('required',true);
        }
        else{
            document.getElementById('nickname').removeAttribute('required');
            document.getElementById('nick').style.display="none";
        }
        }

</script>
</form>
</fieldset>
</p>

Answer 1

将#nick div的初始显示设置为“无”。您的函数仅在更改复选框时运行，因此您需要确保自己的初始状态。

   function nicknameFunction() {
        if (document.getElementById('yesNick').checked){
            document.getElementById('nick').style.display="inline";
            document.getElementById('nickname').setAttribute('required',true);
        }
        else{
            document.getElementById('nickname').removeAttribute('required');
            document.getElementById('nick').style.display="none";
        }
        }

#nick {
  display:none;
}

<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>

<div id= "nick">
    <label for = "nickname">Nickname:</label>
    <input type="text" name="nickname" id="nickname"><br/>
</div>

<input type="submit" value="Vertify"/>

</form>
</fieldset>

Answer 2

您不需要JavaScript；实际上，您不应该为此使用JS，因为访问dom的速度很慢。 CSS绰绰有余。您也可以通过使用width而不是display属性来使其具有动画效果，但是在我的示例中，我仅使用了display属性。

#yesNick:checked ~ #nickname {
  display: block;
}
  
#nickname {
  display: none;
}

<div>
  <label for = "yesNick"> Nickname?:</label>
  <input id="yesNick" name="yesNick" type="checkbox" value="yes"/><br/>
  <label for = "nickname">Nickname:</label>
  <input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>

Answer 3

尝试第一次隐藏文本框：

var nickName =  document.getElementById('nick');
nickName.style.display="none";  
  function nicknameFunction() {
        if (document.getElementById('yesNick').checked){
            nickName.style.display="inline";
            document.getElementById('nickname').setAttribute('required',true);
        }
        else{
            document.getElementById('nickname').removeAttribute('required');
            nickName.style.display="none";
        }
        }

我被复选框属性卡住了

3 个答案: