Javascript 我被复选框属性卡住了

我最近开始学习JavaScript，对checkbox属性有一个问题

我想把昵称功能，即如果有人想把他/她的昵称，他/她可以选中复选框，它会出现昵称文本框。 但是，在加载页面时，即使未选中该复选框，文本框仍存在。 谁能帮我解决这个问题

<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>

绰号


昵称：


函数昵称函数（）{
if（document.getElementById（'yesNick'）。选中）{
document.getElementById（'nick'）.style.display=“inline”；
document.getElementById（'昵称'）.setAttribute（'required'，true）；
}
否则{
document.getElementById（'昵称'）。removeAttribute（'required'）；
document.getElementById（'nick'）.style.display=“无”；
}
}

将

#nick

div的初始显示设置为“无”。您的函数只在更改复选框时运行，所以您需要自己确保初始状态

函数昵称函数（）{
if（document.getElementById（'yesNick'）。选中）{
document.getElementById（'nick'）.style.display=“inline”；
document.getElementById（'昵称'）.setAttribute（'required'，true）；
}
否则{
document.getElementById（'昵称'）。removeAttribute（'required'）；
document.getElementById（'nick'）.style.display=“无”；
}
}

尼克{ 显示：无； }

绰号


昵称：

将

#nick

div的初始显示设置为“无”。您的函数只在更改复选框时运行，所以您需要自己确保初始状态

函数昵称函数（）{
if（document.getElementById（'yesNick'）。选中）{
document.getElementById（'nick'）.style.display=“inline”；
document.getElementById（'昵称'）.setAttribute（'required'，true）；
}
否则{
document.getElementById（'昵称'）。removeAttribute（'required'）；
document.getElementById（'nick'）.style.display=“无”；
}
}

尼克{ 显示：无； }

绰号


昵称：

第一次尝试隐藏文本框：

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";
        }
        }

---

第一次尝试隐藏文本框：

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";
        }
        }

---

您不需要JavaScript来实现这一点；事实上，您不应该使用JS来实现这一点，因为访问dom的速度非常慢。CSS已经足够了。也可以使用“宽度”而不是“显示”属性设置动画，但在我的示例中，我只使用了“显示”属性

#yesNick:checked~#昵称{
显示：块；
}
#绰号{
显示：无；
}

绰号


昵称：

这不需要JavaScript；事实上，您不应该使用JS来实现这一点，因为访问dom的速度非常慢。CSS已经足够了。也可以使用“宽度”而不是“显示”属性设置动画，但在我的示例中，我只使用了“显示”属性

#yesNick:checked~#昵称{
显示：块；
}
#绰号{
显示：无；
}

绰号


昵称：

将

div设置为
显示：无页面加载（使用CSS）
或在页面加载时调用您的函数
昵称函数
，以触发显示逻辑。将
div
设置为
display:none页面加载（使用CSS）<代码>
或在页面加载时调用函数
昵称函数
，以触发显示逻辑。