CODEWITHSUNDEEP
javascriptjqueryradio-button
Justin
Justin

Reputation: 329

Check all radio buttons for selected value

I have a list of questions. One question is visible at a time - the rest hidden - as you go through each question you press next. You can also press back and change answers as you go.

I'm trying to figure out if any questions so far have been answered NO - if they have then show this item. Otherwise show the other.

Markup:

<div id="audit">
    <p>
        <label class="check-label">Question 1</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235312_0" name="CAT_Custom_235312" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235312_1" name="CAT_Custom_235312" class="required" />No</p>
    <p>
        <label class="check-label">Question 2</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235313_0" name="CAT_Custom_235313" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235313_1" name="CAT_Custom_235313" class="required" />No</p>
    <p>
        <label class="check-label">Question 3</label>
        <br />
        <input type="radio" value="Yes" id="CAT_Custom_235314_0" name="CAT_Custom_235314" class="required" />Yes
        <br />
        <input type="radio" value="No" id="CAT_Custom_235314_1" name="CAT_Custom_235314" class="required" />No</p>
</div>
<div class="granted" style="display: none;">Yes</div>
<div class="denied" style="display: none;">No</div>

And the JS

$('input[type="radio"]').click(function () {
    if ($('input[type=radio]:checked').val() == 'No') {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

Here is a jsFiddle of what I have so far: http://jsfiddle.net/5ZKyH/1/ (radios only)

It works on the first item, but no more after. I can change the first answer as many times as I like and it'll swap, but if I move to question two nothing happens.

At the end it needs to be accurately telling me were ANY of the questions answered NO

Can't quite seem to figure out how to check all of the inputs each time.

Upvotes: 0

Views: 1683

Answers (3)

Ian
Ian

Reputation: 50933

Try it using the following Javascript:

$("#audit").on("click", 'input[type="radio"]', function () {
    var allRadios = $('input[type="radio"]');
    var checkedNo = allRadios.filter(function () {
        return $(this).is(":checked") && $(this).val() === "No";
    });
    if (checkNo.length > 0) {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

DEMO: http://jsfiddle.net/ma7k9/1/

It filters the radio buttons on being checked and having the value "No". If any are found, it shows the ".denied" element, otherwise shows the ".granted" element.

Notice how I changed the event binding. This uses event delegation, and binds one event to the <div id="audit"> element...instead of one event to each radio button. To me, this made sense, in case you have other radio buttons on the page and don't want to target them for this, and to reduce the number of handlers being bound.

When a click event occurs inside of the #audit div, the callback handler only executes if the target element (where the event originated) matches the selector input[type="radio"]. From there, the callback executes the logic.

Upvotes: 4

PraJen
PraJen

Reputation: 606

    $('input[type="radio"]').click(function () {
   if ($('input[type=radio]:checked').val() == 'No') {
   $('.denied').show();

         $("#2p").show();
           $("#3p").hide();

        if( $("input[name='CAT_Custom_235313']:checked").val()=='No')
        {
           // alert($("CAT_Custom_235313_1").val());
         $("#3p").show();
        }
} else {

}
 });

DEMO::http://jsfiddle.net/Praveen16oct90/5ZKyH/4/

Upvotes: 0

FoolishSeth
FoolishSeth

Reputation: 4031

Iterate over your checkboxes in jquery by using .each() on the selector result, then behave appropriately depending on whether any of them were marked 'No'.

$('input[type="radio"]').click(function () {
    var anyNos = false;
    $('input[type=radio]:checked').each(function(e) {
        if ($(this).val() == 'No') {
            anyNos = true;
            return false;
        }            
    });

    if (anyNos) {
        $('.denied').show();
        $('.granted').hide();
    } else {
        $('.granted').show();
        $('.denied').hide();
    }
});

Upvotes: 0

Related Questions