Question

我试图找出一个基本脚本来显示/隐藏DIV，具体取决于所选的单选按钮。我是脚本新手，所以不能确定我正在做什么......如果可以指出正确的方向，那就太好了。

在他们的时刻，如果我点击YES答案就会出现DIV（我意识到我现在有重复的ID - 仍在尝试编写脚本，我可以弄清楚当我更改它们时如何使其工作到一个班级）

所以我想要的是一堆有三个答案选择的问题 - YES，NO和UNSURE。问题下将有三个隐藏的DIV。在每个问题中都有答案后，将显示三个div中的一个。

所有YES答案 -

＆＃13;

<!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>

＆＃13;

显示-ME-1 答案的组合 - show-me-2 所有没有答案 - show-me-3

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

Answer 1

添加＆＃39; id＆＃39;为所有人“是”＆＃39;并且没有＆＃39;复选框，以便我们可以在所有＆＃34;是/否＆＃34;按钮被选中。并相应地显示相应的div（show-me-1 / show-me-2）
为所有人添加课程，以便我们可以跟踪是否检查了任何一个。如果检查了所有3的任何组合，则显示相应的div（show-me-3）
当显示一个div时隐藏所有其他div。并且最初保留所有隐藏的

＆＃13;

  

     <!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>

＆＃13;

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

Answer 2

首先，一个问题......为什么你为每个问题使用一个表格？如果没有理由，你最好把一个表格改成＆＃34; name＆＃34;每组单选按钮的值。首先，我已经清理了一下你的HTML ......

class AwesomeRouter extends Component {
    render() {
        return (
            <div>
              <Route path='/event' component={Event}/>
              <Route path='/customercenter' component={CustomerCenter}/>
            </div>
        );
    }
}

针对您的问题，一个可行的解决方案是为每个响应设置一个特定权重，因此当回答完所有问题后，您可以对结果求和，并知道是否全部是，是全部否或混合。您可以使用＆＃34;值＆＃34;设置权重。单选按钮的属性，但我更喜欢创建一个独立的数据字段，因此您可以使用＆＃34; value＆＃34;对于与表格一起发送的某些信息。

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

<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>

我假设每个问题总是会有一个＆＃34; p＆＃34;标题，正如您所看到的，我使用该标题来了解问题的数量。如果需要，你可以调整它。

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

<强>编辑：

显然，您需要在表单内的不同问题组中使用此行为。在这里你有＆＃34;扩展＆＃34;版本：

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

重要提示：请注意，现在show divs有＆＃34; class＆＃34;，而不是＆＃34; id＆＃34;。你不应该有相同的＆＃34; id＆＃34;在不同的元素!!

然后只是Javascript / jQuery中的一些变化......

<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

2 个答案: