CODEWITHSUNDEEP
jqueryradio-button
scarhand
scarhand

Reputation: 4337

when 1 radio is selected, check all others' values

i have a bunch of radio's. here is the code for them:

        <div class="question">18 years old or older?</div>
        <div class="radios">
        <input type="radio" name="age" value="yes"> Yes &nbsp;
        <input type="radio" name="age" value="no"> No
        <div class="tooltip"><span>Sorry, you must be 18 years old or older.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">Earn $1,600 or more each month?</div>
        <div class="radios">
        <input type="radio" name="earn" value="yes"> Yes &nbsp;
        <input type="radio" name="earn" value="no"> No
        <div class="tooltip"><span>Sorry, you must earn $1,600 or more each month.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">Stable in your job and residence?</div>
        <div class="radios">
        <input type="radio" name="stable" value="yes"> Yes &nbsp;
        <input type="radio" name="stable" value="no"> No
        <div class="tooltip"><span>Sorry, you must be stable in your job and residence.</span></div>
        </div>

        <div style="clear: both;"></div>

        <div class="question">No reposessions within 1 year?</div>
        <div class="radios">
        <input type="radio" name="repo" value="yes"> Yes &nbsp;
        <input type="radio" name="repo" value="no"> No
        <div class="tooltip"><span>Sorry, you must have no reposessions within 1 year.</span></div>
        </div>

        <div style="clear: both;"></div>

when someone clicks on any of these radios, i want it to check to see if all of the radios values are "yes" or not.

if they are yes, i want it to alert "all yes!"

heres my code that is not working:

$('.radios input').mousedown(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios input').each(function () {
        if ($(this).val() == 'yes')
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

any help would be great.

it seems to be alerting even if not all radios are set to 'yes'.

Upvotes: 0

Views: 139

Answers (4)

gloomy.penguin
gloomy.penguin

Reputation: 5911

This is my answer... http://jsfiddle.net/8JRG5/

$("input[type=radio]").on('change',function() {
    var checked = new Array();  
    var all_yes = true;
    $("input:radio").each( function() {
        var name = $(this).attr("name"); 
        var val = $("input:radio[name='"+name+"']:checked").val();
        checked[name] = val; 
        if (val!=='yes') { all_yes = false; }  
  });

  console.log('all_yes = ' + all_yes);
  console.log(checked); 
});

Upvotes: 0

kei
kei

Reputation: 20511

DEMO

$('.radios :radio').change(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios :radio:checked').each(function () {
        if ($(this).val() == 'yes')
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

Useful selectors:
:radio - targets just radio buttons and not all other inputs
:checked - just get the values of the ones that are selected

Upvotes: 1

drip
drip

Reputation: 12933

Here are some tweaks on your code that will work now.

$('.radios input').change(function () {
    if ($(this).val() == 'no')
        $(this).closest('.radios').find('.tooltip').show();
    else
        $(this).closest('.radios').find('.tooltip').hide();

    $yescount = 0;

    $('.radios input').each(function () {
        if ($(this).is(':checked'))
            $yescount += 1;
    });

    if ($yescount == 4)
        alert('all yes');
});

Pretty much the "mousedown" was not a good idea, it was changed on "change". An the if "$(this).val()" will always return yes, you should check if it is checked.

Demo

Upvotes: 0

j08691
j08691

Reputation: 207943

Use:

$('.radios input').click(function () {
    if($('input[type=radio][value="yes"]:checked').length==$('input[type=radio][value="yes"]').length) alert('yes');
});

jsFiddle example

Upvotes: 3

Related Questions