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>

我试图以某种方式结束它并开始一个新的脑袋，但这没有帮助。谢谢。

Answer 1

要将“ no”设置为默认值，请在html中将输入类型=“ radio”设置为id =“ chkNo”（现在选中的元素是id为“ radio”的id =“ chkYes”），然后在HTML中使用style =“ display：none”将div设置为id =“ dvPassport”。函数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>

Answer 2

首先，要将“ no”设置为默认值，只需将“ checked”一词从“是”输入移动到“否”输入：

<input type="radio" id="chkNo" **checked** name="chkEducation" onclick="ShowHideDiv()"/>

我用div（id dvPassport）包围了您的代码，以重新创建您的问题。解决此问题的一种方法是在您的div内的单选按钮周围使用section标签。我在该部分的后面插入了一个段落标签以演示效果（例如，如果有人切换到“是”，然后又切换回“否”）

希望这会有所帮助

瑞秋

<script type="text/javascript">
  function ShowHideDiv() {
    var chkYes = document.getElementById("chkYes");
    //var dvPassport = document.getElementById("dvPassport");
    var education = document.getElementById("edu");
    //dvPassport.style.display = chkYes.checked ? "block" : "none";
    education.style.display = chkYes.checked ? "block" : "none";
  }
</script>

<div id="dvPassport">
 
 <section id="edu">    
    <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>
  </section>

  <p>hello</p>
  
</div>

显示/隐藏Javascript问题

2 个答案: