javascript - 显示/隐藏 Javascript 问题

Question

我在网上找到了这个脚本，它应该显示“隐藏文本框和标签”。我对它所做的任何更改都会阻止它工作，如果我更改 divpassword 它也不会工作。问题是，如果我选中“否”，它会隐藏之后的所有内容。如何让它只隐藏所需的部分，以及如何将复选框默认设置为否？

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<span>Do you have More Education?</span>
<label for="chkYes">
       <input type="radio" id="chkYes" checked name="chkEducation" 
    onclick="ShowHideDiv()" />
       Yes
    </label>
<label for="chkNo">
       <input type="radio" id="chkNo" name="chkEducation" onclick="ShowHideDiv()"/> 
        No
    </label>

我试图用 or body 结束它并开始一个新的 head 但它没有帮助。谢谢。

Answer 1

要将“no”设置为默认值，请在选中的 html 中设置 input type="radio"with id="chkNo"(现在选中的元素是 inpu type="radio"with id="chkYes")和在带有 style="display:none"的 html 中设置 id="dvPassport"的 div。ShowHideDiv 函数似乎是正确的，要仅隐藏您想要的元素，只需在仅包含文本框和标签的 div 上设置 id="dvPassport"。示例:

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    var dvPassport = document.getElementById("dvPassport");
    dvPassport.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<span>Do you have More Education?</span>
<label for="chkYes">
       <input type="radio" id="chkYes" name="chkEducation" 
    onclick="ShowHideDiv()" />
       Yes
    </label>
<label for="chkNo">
       <input type="radio" id="chkNo" checked name="chkEducation" onclick="ShowHideDiv()"/> 
        No
</label>
<div id="dvPassport" style="display:none">
  <br/>
  <input type="text" placeholder="text1"/>
  <br/><br/>
  <input type="text" placeholder="text2"/>
<div>