根据单选按钮选择显示/隐藏 div答案

【问题标题】：Show / Hide a div depending on radio button selection根据单选按钮选择显示/隐藏 div
【发布时间】：2018-02-27 18:38:29
【问题描述】：

我正在尝试编写一个基本脚本来根据选择的单选按钮显示/隐藏 DIV。我是脚本新手，所以不太确定自己在做什么……如果能指出正确的方向，那就太好了。

如果我单击“是”答案，则会出现一个 DIV（我意识到我现在有重复的 ID - 仍在尝试编写脚本，当我更改它们时我可以弄清楚如何使它工作上课）

所以我想要的是一堆带有三个答案选择的问题 - 是、否和不确定。问题下方将有三个隐藏的 DIV。在为每个问题放置答案后，三个 div 中的一个将显示。

所有是的答案 -

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<form id="question-1">
	<p>Question one...</p>
	<input id="yes" name="test" type="radio" /> Yes
	<input name="test" type="radio" />No
	<input name="test" type="radio" />Unsure
</form>
<form id="question-2">
	<p>Question two...</p>
	<input id="yes" name="test" type="radio" /> Yes
	<input name="test" type="radio" />No
	<input name="test" type="radio" />Unsure
</form>
<form id="question-3">
	<p>Question three...</p>
	<input id="yes" name="test" type="radio" /> Yes
	<input name="test" type="radio" />No
	<input name="test" type="radio" />Unsure
</form>
<div id="show-me-1" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
<div id="show-me-2" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
<div id="show-me-3" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>

<script>
$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'yes') {
            $('#show-me-1').show();           
       }

       else {
            $('#show-me-1').hide();   
       }
   });
});	
</script>


</body>
</html>

show-me-1 答案组合 - show-me-2 所有 NO 答案 - show-me-3

我还需要一个按钮来清除所有答案并再次隐藏 div - 但不知道该怎么做。

【问题讨论】：

请告知何时显示隐藏分区
请检查以下解决方案。

标签： jquery html hide show radio

【解决方案1】：

为所有'yes'和'no'复选框添加'id'，以便我们可以在选中所有“yes/no”按钮时进行计数。并显示相应的div（show-me-1/show-me- 2) 相应地
为所有添加类，这样我们就可以跟踪是否选中了任何一个。如果选中了所有3个的任何组合，则显示相应的div（show-me-3）
当显示一个 div 时，隐藏所有其他 div。并且最初保持所有隐藏

  

     <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<form id="question-1">
    <p>Question one...</p>
    <input class="yes" id="yes1" name="test" type="radio" /> Yes
    <input class="no"  id="no1" name="test" type="radio" />No
    <input class="un"  id="un1" name="test" type="radio" />Unsure
</form>
<form id="question-2">
    <p>Question two...</p>
    <input class="yes"  id="yes2" name="test" type="radio" /> Yes
    <input class="no"  id="no2"  name="test" type="radio" />No
    <input class="un"  id="un2" name="test" type="radio" />Unsure
</form>
<form id="question-3">
    <p>Question three...</p>
    <input class="yes"  id="yes3" name="test" type="radio" /> Yes
    <input class="no"  id="no3"  name="test" type="radio" />No
    <input class="un"  id="un3" name="test" type="radio" />Unsure
</form>
<div id="show-me-1" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
<div id="show-me-2" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
<div id="show-me-3" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>

<script>
    $(document).ready(function() {
        $('#show-me-1').hide();
        $('#show-me-2').hide();
        $('#show-me-3').hide();


        $('input[type="radio"]').click(function() {

            if ($('#yes1').is(":checked"))
            {
                if ($('#yes2').is(":checked"))
                {
                    if ($('#yes3').is(":checked"))
                    {
                        $('#show-me-1').show();
                        $('#show-me-2').hide();
                        $('#show-me-3').hide();
                    }else{
                        $('#show-me-1').hide();
                    }
                }else{
                    $('#show-me-1').hide();
                }
            }else{
                $('#show-me-1').hide();
            }

            if ($('#no1').is(":checked"))
            {
                if ($('#no2').is(":checked"))
                {
                    if ($('#no3').is(":checked"))
                    {
                        $('#show-me-3').show();
                        $('#show-me-1').hide();
                        $('#show-me-2').hide();
                    }else{
                        $('#show-me-3').hide();
                    }
                }else{
                    $('#show-me-3').hide();
                }
            }else{
                $('#show-me-3').hide();
            }

            if ($('.yes').is(":checked"))
            {
                if ($('.no').is(":checked"))
                {
                    if ($('.un').is(":checked"))
                    {
                        $('#show-me-2').show();
                        $('#show-me-1').hide();
                        $('#show-me-3').hide();
                    }else{
                        $('#show-me-2').hide();
                    }
                }else{
                    $('#show-me-2').hide();
                }
            }else{
                $('#show-me-2').hide();
            }

        });
    });
</script>


</body>
</html>

JsFiddle：https://jsfiddle.net/ajithmohan/hoL7gjz3/

【讨论】：

为每个单选按钮添加类和id，并计算每次点击的计数。
请在您的解决方案中添加信息，所有步骤都要简洁。

【解决方案2】：

首先，一个问题......为什么每个问题都使用一个表格？如果没有理由，您最好放置一个表单并更改每组单选按钮的“名称”值。首先，我已经稍微清理了你的 HTML...

<form id="questions">
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question three...</p>
    <input name="thirdq" type="radio" data-weight="1" />Yes
    <input name="thirdq" type="radio" data-weight="-1" />No
    <input name="thirdq" type="radio" data-weight="0" />Unsure
</form>

<div id="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
<div id="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
<div id="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>

解决您的问题的一种可能方法是为每个回答设置一个特定的权重，这样当所有问题都得到回答后，您可以将结果相加，并知道是否所有问题都是“是”、“全部”是“否”或混合。您可以使用单选按钮的“值”属性设置权重，但我更喜欢创建一个独立的数据字段，因此您可以将“值”用于与表单一起发送的某些信息。

所以在这里你有一个可行的方法来做到这一点......

$(document).ready(function() {

  $('input[type="radio"]').click(function() {

    var nQuestions = $('p.question-title').length;
    var $checkedItems = $('input[type="radio"]:checked');

    if($checkedItems.length == nQuestions) {  // All answered

      var sum = 0;
      $checkedItems.each(function() {
          sum += Number($(this).data('weight'));
      });

      $('div.result').hide();
      if(sum == nQuestions)
        $('div#show-me-1').show();
      else if(sum == -nQuestions)
        $('div#show-me-3').show();
      else
        $('div#show-me-2').show();
    }
  });
});

我假设每个问题都会有一个“p”标题，如您所见，我使用该标题来了解问题的数量。您可以根据需要进行调整。

这里有工作小提琴：https://fiddle.jshell.net/rigobauer/m9xnng2e/

已编辑：

显然，您需要在表单中包含不同组问题的这种行为。这里有“扩展”版本：

<form id="questions">

<fieldset>
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question three...</p>
    <input name="thirdq" type="radio" data-weight="1" />Yes
    <input name="thirdq" type="radio" data-weight="-1" />No
    <input name="thirdq" type="radio" data-weight="0" />Unsure

    <div class="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
    <div class="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
    <div class="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>
</fieldset>

<fieldset>
    <p class="question-title">Question one...</p>
    <input name="firstq" type="radio" data-weight="1" />Yes
    <input name="firstq" type="radio" data-weight="-1" />No
    <input name="firstq" type="radio" data-weight="0" />Unsure

    <p class="question-title">Question two...</p>
    <input name="secondq" type="radio" data-weight="1" />Yes
    <input name="secondq" type="radio" data-weight="-1" />No
    <input name="secondq" type="radio" data-weight="0" />Unsure

    <div class="show-me-1" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
    <div class="show-me-2" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
    <div class="show-me-3" class="result" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>
</fieldset>

</form>

重要提示：请注意，现在显示 div 有“class”，而不是“id”。你不应该在不同的元素中有相同的“id”！！

然后只是 Javascript/jQuery 中的一些更改...

$(document).ready(function() {

  $('input[type="radio"]').click(function() {

    var $thisFieldset = $(this).closest('fieldset');
    var nQuestions = $thisFieldset.find('p.question-title').length;
    var $checkedItems = $thisFieldset.find('input[type="radio"]:checked');

    if($checkedItems.length == nQuestions) {  // All answered

      var sum = 0;
      $checkedItems.each(function() {
          sum += Number($(this).data('weight'));
      });

      $thisFieldset.find('div.result').hide();
      if(sum == nQuestions)
        $thisFieldset.find('div.show-me-1').show();
      else if(sum == -nQuestions)
        $thisFieldset.find('div.show-me-3').show();
      else
        $thisFieldset.find('div.show-me-2').show();
    }
  });
});

希望对你有帮助

【讨论】：

这太棒了——正是我所追求的。谢谢！
问题 - 当我在页面上只有一个但我需要有两个（或更多）并且当有多个时，此功能不起作用。我假设它是因为脚本正在等待选择所有单选按钮。我需要更改什么以使其仅查找特定选择中的单选按钮？（所以我需要在一页上两块上述问题）
我想出了一个解决方案。很确定它不是正确/最好的方法，但它确实有效。
我已经编辑了添加多问题组版本的答案。希望对您有所帮助！