如何在隐藏问题时阻止单选按钮的结果显示

Question

我正在使用单选按钮，如果我更改对问题 #1 的回答，我需要将第二个问题的结果从屏幕上隐藏起来。

例如，如果我对问题 #1 说“是”，然后对问题 #2 说“否”，然后我回到问题 #1 并将答案更改为“否”，问题 2 将被隐藏为应该，但第 2 题的结果将与第 1 题的结果一起显示在屏幕上。

Is the accurate SKU on the LOS?<br />
<br />
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br />
<div id="ifYes" style="visibility:hidden"><br />
    Can the customer call the VM from their phone?<br />
    Yes <input type="radio" onclick="javascript:yesnoCheck1();" name="yesno1" id="yesCheck1">
    No <input type="radio" onclick="javascript:yesnoCheck1();" name="yesno1" id="noCheck1"><br />
</div>
<div id="ifYes1" style="visibility:hidden">
    Result of selecting Yes to second question.
</div>
<div id="ifNo1" style="visibility:hidden">
    Result of selecting No to second question</div>
<div id="ifNo" style="visibility:hidden">
    Result of selecting No to first question
</div>
<script>
    function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
            document.getElementById('ifYes').style.visibility = 'visible';
        }
        else document.getElementById('ifYes').style.visibility = 'hidden';
        if (document.getElementById('noCheck').checked) {
            document.getElementById('ifNo').style.visibility = 'visible';
        }
        else document.getElementById('ifNo').style.visibility = 'hidden';
    }</script><script>
    function yesnoCheck1() {
        if (document.getElementById('yesCheck1').checked) {
            document.getElementById('ifYes1').style.visibility = 'visible';
        }
        else document.getElementById('ifYes1').style.visibility = 'hidden';
        if (document.getElementById('noCheck1').checked) {
            document.getElementById('ifNo1').style.visibility = 'visible';
        }
        else document.getElementById('ifNo1').style.visibility = 'hidden';
    }</script>

Answer 1

如果我正确理解您的问题，下面的代码应该可以满足您的需求。为了帮助您了解这些变化：

1. 假设您有两个元素，一个是另一个的父元素，如下所示：

<div id="parent" style="visibility:hidden">
    I am the parent
    <div id="child" style="visibility:visible">
        And I am the child
    </div>
</div>

父元素将被隐藏，但子元素不会。如果你想控制一个元素及其所有子元素的可见性，你可以使用 'display' 属性：

<div id="parent" style="display:none">
    I am the parent
    <div id="child" style="display:block">
        And I am the child
    </div>
</div>

现在子元素也被隐藏了。

使用显示而不是可见性的另一个有用之处是带有visibility:hidden 的元素仍会占用页面空间，而带有display:none 的元素则不会。

1. 使用该技术，我将您的 ifYes1 和 ifNo1 div 移动到 ifYes div 中。这样隐藏或显示 ifYes div 会使与问题 2 相关的所有内容同时可见或不可见。

2. 这更多的是一种风格，但是如果您使用两个单选按钮，一旦用户选中了一个按钮，那么只需查看其中一个的“已选中”属性就足够了。如果它被选中，那么你知道另一个不是，反之亦然。基于这个逻辑，我稍微简化了你的 if/else 语句。就个人而言，我认为它使代码更易于阅读。

这是修改后的代码：

Is the accurate SKU on the LOS?<br />
<br />
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br />
<div id="ifYes" style="display:none"><br />
Can the customer call the VM from their phone?<br />
Yes <input type="radio" onclick="javascript:yesnoCheck1();" name="yesno1" id="yesCheck1">
No <input type="radio" onclick="javascript:yesnoCheck1();" name="yesno1" id="noCheck1"><br />
<div id="ifYes1" style="display:none">
Result of selecting Yes to second question.
</div>
<div id="ifNo1" style="display:none">
Result of selecting No to second question
</div>
</div>
<div id="ifNo" style="display:none">
Result of selecting No to first question
</div>
<script>
  function yesnoCheck() {
    if(document.getElementById('yesCheck').checked){
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
    } else {
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('ifNo').style.display = 'block';
    }
  }
</script>
<script>
  function yesnoCheck1() {
      if (document.getElementById('yesCheck1').checked) {
          document.getElementById('ifYes1').style.display = 'block';
          document.getElementById('ifNo1').style.display = 'none';
      } else {
          document.getElementById('ifYes1').style.display = 'none';
          document.getElementById('ifNo1').style.display = 'block';
      }
  }
</script>