有多个问题切换是/否

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

*更新*

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

HTML：

 
2. HAVE YOU HAD SHINGLES?
  
 Yes No 
 
 
 
3. HAVE YOU HAD PAIN IN THE AREA OF THE SHINGLES RASH FOR AT LEAST THE LAST 3 MONTHS?
  
 Yes No 
 
 
3A. IF IT HAS NOT YET BEEN 3 MONTHS, HOW LONG WOULD YOU ESTIMATE THIS PAIN HAS BEEN ONGOING?
   
 
 
  

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

 
 
4. DO YOU HAVE ANY OTHER CHRONIC PAIN THAT IS NOT ASSOCIATED WITH YOUR SHINGLES PAIN?
  
 Yes No 
 
 
 
5. ARE YOU (CURRENTLY) TAKING MEDICINE TO MANAGE THE PAIN FROM SHINGLES?
  
 Yes No 
  

JS

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

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

Answer 1

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

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

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

更新：是/否切换

演示

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

 .Questions{display:none;} 

  
 YesYes No 
Questions?
 
 
 Yes No 
Questions?
 
 Yes No 
Questions?
  

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

---

当总结所有答案的时候，你会这样做：

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

jsFiddle演示

Answer 3

您需要为每个按钮添加唯一的ID或类，并为每个按钮链接一个单击function，如下所示：

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

或者，如果它们具有共同的function，您可以将它们组合在一起：

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