使用多个问题切换是/否

Question

我在一个表格中有 5 个问题，其中一些问题的回答是“是”/“否”。一旦用户选择了其中一个按钮，我希望能够切换是和否按钮。我遇到的问题是，如果回答了其中一个问题，而我回答了下一个问题，则会从所有其他问题中删除答案。我确定我缺少一些简单的东西。

* 更新 *

我的一切都按照我想要的方式进行了，谢谢大家的帮助。我现在注意到一件事，带有子问题的问题，当我选择是或否时，子问题会显示，但是如果我单击屏幕上的任何位置，它会从问题中删除活动类。

HTML：

 <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-2">
                <p><strong>2.</strong> HAVE YOU HAD SHINGLES?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group btn-toggle">
                    <button type="button" class="btn btn-default yes-no btn-1" data-radio-name="radio">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
                </div>
            </div>

           <div class="col-xs-12 col-md-6 col-md-offset-2 study-question" id="q-3">
                <p><strong>3.</strong> HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?</p>
                <input name="radio" type='hidden' value="Yes"/>
                <div class="btn-group" data-toggle="buttons">
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="yes">Yes</button>
                    <button type="button" class="btn btn-default yes-no" data-radio-name="radio" value="no">No</button>

                    <div class="row">
                        <div class="col-xs-12 col-md-6 col-md-offset-2 study-question sub-question">
                            <p><strong>3A.</strong> IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?</p>
                            <input name="radio" type='hidden' value="Yes"/>
                            <input type="email" class="form-control study-form-control" id="how-many-year" placeholder="How long?">
                        </div>
                    </div>
                </div>
            </div>

JS

    $('.yes-no').click(function(){
    $(this).closest('div').find('.yes-no').each(function(){
        $(this).removeClass('active');
    });

    $(this).addClass('active');


    $(this).val()=='yes'?$(this).closest('div').find('.sub-question').show():$(this).closest('div').find('.sub-question').hide();

});

---

HTML

<div class="col-xs-12 col-md-6 col-md-offset-2 study-question">
  <p><strong>4.</strong> DO YOU HAVE ANY OTHER CHRONIC  PAIN THAT IS NOT ASSOCIATED WITH YOUR SHINGLES PAIN?</p>
  <input name="radio" type='hidden' value="Yes"/>
  <div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
  </div>
</div>

<div class="col-xs-12 col-md-6 col-md-offset-2">
  <p><strong>5.</strong> ARE YOU (CURRENTLY) TAKING MEDICINE TO MANAGE THE PAIN FROM SHINGLES?</p>
  <input name="radio" type='hidden' value="Yes"/>
  <div class="btn-group" data-toggle="buttons">
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">Yes</button>
    <button type="button" class="btn btn-default yes-no" data-radio-name="radio">No</button>
  </div>
</div>

JS

$('.btn-toggle').click(function() {
    $(this).toggleClass('active'); 
    console.log($(this));
});

我只是希望它针对用户正在尝试回答的当前问题，而不是一次解决所有问题。

Answer 1

您可以使用.closest('div') 定位触发.change() 事件的元素最近的div，并使用.find() 定位该类。

一个处理MyToggle类元素的所有更改事件的函数

这将允许您对所有问题运行相同的函数，如下面的演示所示。

更新：是/否切换

演示

$(".MyToggle").click(function() {
    $(this).val()=='yes'?$(this).closest('div').find('.Questions').show():$(this).closest('div').find('.Questions').hide();
});

.Questions{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Yes<button class="MyToggle" value="yes">Yes</button> <button class="MyToggle"  value="no">No</button>
    <div class="Questions">Questions?</div>
</div>
<div>
    Yes<input type="radio" name="Q2" class="MyToggle" value="yes"/> No<input type="radio" name="Q2" class="MyToggle"  value="no"/>
    <div class="Questions">Questions?</div>
</div><div>
    Yes<input type="radio" name="Q3" class="MyToggle" value="yes"/> No<input type="radio" name="Q3" class="MyToggle"  value="no"/>
    <div class="Questions">Questions?</div>
</div>

我希望这会有所帮助。编码愉快！

Answer 2

看起来 NewToJS 用最接近的 DIV 击败了我，但我们使用 .each() 从 DIV 中的所有按钮中删除活动类，然后仅将活动类添加到单击的按钮。

此示例使用按钮而不是单选控件。

$('.yes-no').click(function(){
    $(this).closest('div').find('.yes-no').each(function(){
        $(this).removeClass('active');
    });
    $(this).addClass('active');
});

jsFiddle Demo

---

当需要总结所有答案时，你会这样做：

$('#mybutt').click(function(){
    var cnt = 0;
    var obj = {};
    $('.btn-group').each(function(){
        cnt++;
        obj[cnt] = $(this).find('.active').text();
    });
    alert( JSON.stringify(obj) );
});

jsFiddle Demo

Answer 3

您需要为每个按钮添加一个唯一的 id 或类，并为每个按钮链接一个点击函数，如下所示：

$('.btn-toggle').click(function() {
    $(this).toggleClass('active'); 
        console.log($(this));
 });

$('.btn-toggle2').click(function() {
    $(this).toggleClass('active'); 
        console.log($(this));
 });

$('.btn-toggle3').click(function() {
    $(this).toggleClass('active'); 
        console.log($(this));
 });

$('.btn-toggle4').click(function() {
    $(this).toggleClass('active'); 
        console.log($(this));
 });

或者，如果它们具有共同的功能，您可以像这样将它们组合在一起：

$('.btn-toggle', '.btn-toggle2', '.btn-toggle3', '.btn-toggle4') .click(function() {
    $(this).toggleClass('active'); 
        console.log($(this));
 });