有多个问题切换是/否 [英] Toggle Yes / NO with multiple questions

问题描述

我在表格中有5个问题，其中一些问题的答案是肯定/否定。我希望能够在用户选择其中一个按钮后切换是和否按钮。我遇到的问题是，如果其中一个问题得到解答，我回答下一个问题，它会从所有其他问题中删除答案。我确信我有一些简单的东西。

*更新*

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

HTML：

 < div class =col-xs-12 col-md -6 col-md-offset-2 study-questionid =q-2> 
< p>< strong> 2.< / strong>你有唱歌吗？< / p> 
< input name =radiotype ='hidden'value =Yes/> 
< div class =btn-group btn-toggle> 
< button type =buttonclass =btn btn-default yes-no btn-1data-radio-name =radio>是< / button> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radio> No< / button> 
< / div> 
< / div> 
 
< div class =col-xs-12 col-md-6 col-md-offset-2 study-questionid =q-3> 
< p>< strong> 3.< / strong>您是否已经在最近3个月内在Shingles RASH区域内疼痛？< / p> 
< input name =radiotype ='hidden'value =Yes/> 
< div class =btn-groupdata-toggle =buttons> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radiovalue =yes>是< / button> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radiovalue =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>如果它还没有3个月，那么你估计这种疼痛会持续多长时间？< / p> 
< input name =radiotype ='hidden'value =Yes/> 
< input type =emailclass =form-control study-form-controlid =how-many-yearplaceholder =多长时间？> 
< / div> 
< / div> 
< / div> 
< / div> 
  

JS

  $（'。yes-no'）。click（function（）{
 $（this）.closest（'div'）。find（'。yes-no'）。each（function（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>您是否有任何与您的手铐无关的其他慢性疼痛？< / p> 
< input name =radiotype ='hidden'value =Yes/> 
< div class =btn-groupdata-toggle =buttons> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radio>是< / button> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radio> No< / button> 
< / div> 
< / div> 
 
< div class =col-xs-12 col-md-6 col-md-offset-2> 
< p>< strong> 5.< / strong>你（目前）正在服用药物治疗手术中的疼痛吗？< / p> 
< input name =radiotype ='hidden'value =Yes/> 
< div class =btn-groupdata-toggle =buttons> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radio>是< / button> 
< button type =buttonclass =btn btn-default yes-nodata-radio-name =radio> No< / button> 
< / div> 
< / div> 
  

JS

  $（'。btn-toggle'）。click（function（）{
 $（this）.toggleClass（'active'）; 
 console.log（$（this））; 
}）; 
  

我只想让它针对用户试图回答的当前问题，而不是所有问题一次。

解决方案

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

处理类别为 MyToggle

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

更新：是/否切换

演示

  $（。MyToggle）。click（function（）{$（this）.val（）=='yes'？$（this ）.closest（ 'DIV'）。找到（：Q uestions '）显示（）：$（这）.closest（' '）发现（'。DIV问题）隐藏（）;}）;  

< pre class =snippet-code-css lang-css prettyprint-override> .Questions {display：none;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< /脚本>< DIV>是< button class =MyTogglevalue =yes>是< / button> < button class =MyTogglevalue =no> No< / button> < div class =Questions> Questions？< / div>< / div>< div>是< input type =radioname =Q2class =MyTogglevalue =yes/>否< input type =radioname =Q2class =MyTogglevalue =no/> < div class =Questions> Questions？< / div>< / div>< div>是< input type =radioname =Q3class =MyTogglevalue =yes/>否< input type =radioname =Q3class =MyTogglevalue =no/> < div class =Questions>问题？< / div>< / div>  

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

I have 5 questions in a form, and a few of them have a YES / NO response. I wanted to just be able to toggle the yes and no buttons once the user selected one of them. The issue I am running into is if one of the question is answered, and I answer the next question, it removes the answer from all other questions. I'm sure there is something simple I am missing.

* Update *

I got everything working the way I wanted to, thank you all for the help. One thing I have noticed now, the questions with the sub question, when I select the yes or no, the sub question display, but if I click anywhere on the screen, it removes the active class from the question.

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

I just want it to target the current question that the user is trying to answer, not all of them at once.

解决方案

You can use .closest('div') to target the closest div of the element that triggered the .change() event and use .find() to target the class.

One function to to deal with all change events for elements with the class of MyToggle

This will allow you to run the same function for all questions as shown in the demo below.

Update: Yes/No toggle

Demo

$(".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>

I hope this helps. Happy coding!

这篇关于有多个问题切换是/否的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！