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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 10, 2015 at 1:33 icekomo asked Mar 10, 2015 at 0:23 icekomoicekomo 9,47677 gold badges3434 silver badges6464 bronze badges 2

• Btw, you are calling a click function on a class element "btn-toggle'" but I can't seem to find it anywhere in your html – AndrewL64 Commented Mar 10, 2015 at 0:41
• If you wish to continue using button controls, check out my answer below. – cssyphus Commented Mar 10, 2015 at 1:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

Looks like NewToJS beat me to the punch with the closest DIV, but instead we use a .each() to remove the active class from all buttons in the DIV before adding the active class only to the clicked button.

This example uses buttons instead of radio controls.

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

jsFiddle Demo

---

And when it es time to sum up all the answers, you would do it this way:

$('#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

You need to add a unique id or class for each button and link a click function for each button like this:

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

Or you can group them together like this if they have a mon function:

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