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

Question

我正在尝试根据选择的单选按钮制定 show/hide DIV 的基本脚本。我刚开始编写脚本，所以不太确定自己在做什么...如果可以指出正确的方向，那就太好了。

此时，如果我点击“是”答案，就会出现 DIV（我意识到我现在有重复的 ID - 仍在尝试编写脚本，我可以弄清楚如何制作当我将它们更改为 class)

时它会起作用

所以我想要的是一堆带有三个答案选项的问题 - 是、否和不确定。题目下面会有三个隐藏的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>

显示我 1 答案的组合 - show-me-2 全部没有答案 - show-me-3

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

Answer 1

为所有 'yes' 和 'no' 复选框添加 'id' 以便我们在所有 "yes/no" 按钮 checked.And 显示相应 div(show-me-1/show-me-2) 相应地
为所有添加 class，以便我们可以跟踪是否有任何一个 checked.And 如果选中所有 3 的任何组合，则显示相应的 div(show-me-3)
当显示一个 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/

Answer 2

首先，一个问题...为什么每个问题都使用一个表格？如果没有理由这样做，您最好放一个表格并更改每组单选按钮的 "name" 值。首先，我稍微清理了你的 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>

您的问题的一个可能解决方案是为每个回答设置一个特定的权重，这样当所有问题都得到回答后，您可以对结果求和并知道是全部是，全部否还是混合。您可以使用单选按钮的 "value" 属性设置权重，但我更喜欢创建一个独立的数据字段，因此您可以使用 "value" 来获取与表单一起发送的一些信息。

所以在这里你有一个可行的方法...

$(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" 标题，如您所见，我正在使用该标题来了解问题的数量。如果需要，您可以进行调整。

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

已编辑：

显然，您需要在表单中使用不同组的问题进行此操作。这里有 "extended" 版本：

<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();
    }
  });
});

希望对你有帮助

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

Show / Hide a div depending on radio button selection

html

jquery

show

hide

radio