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

有多个问题切换是/否

3 个答案: