CODEWITHSUNDEEP
javascriptjqueryradio-button
steve_gallagher
steve_gallagher

Reputation: 3898

jQuery .click() doesn't seem to actuate the unchecking of radio boxes

I'm trying to dynamically create a reset button on radio boxes and then have said reset button uncheck any existing choice when the user clicks the button, yet when I click it, nothing happens. I'm probably missing something obvious but not sure what.

http://jsfiddle.net/sFUBV/5/

$('.surveyor_radio').parent().parent().append('<div class="reset-button">A reset button</div>');

$('.reset-button').click(function () {
    $('#form input[type="radio":checked]').each(function () {
        $(this).prop('checked', false);
    });
});

$('fieldset').each(function () {
    var qid = $(this).attr('id');
    $('.reset-button', $(this)).attr('data-question-id', qid);
});

Upvotes: 1

Views: 187

Answers (4)

Ron Fridman
Ron Fridman

Reputation: 304

try this line instead of each() function

$('.reset-button').click(function () {
    $('#form input[type="radio"]:checked').prop('checked', false);
});

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92893

Replace

$('#form input[type="radio":checked]')

with

$('#form input[type="radio"]:checked')

However, observe that your code doesn't discriminate between groups of radio buttons, and will simply uncheck ALL radio buttons in the entire form.

Fortunately, you already have the data-question-id stored on the radio button, so we can use that to provide a context instead of #form:

$('.reset-button').click(function () {
    $('input[type="radio"]:checked','#'+$(this).data('question-id')).each(function () {
        $(this).prop('checked', false);
    });
});

http://jsfiddle.net/mblase75/sFUBV/10/

As nzifnab pointed out, we can even simplify further:

$('.reset-button').click(function () {
    $('input[type="radio"]','#'+$(this).data('question-id')).prop('checked', false);
});

Upvotes: 1

nzifnab
nzifnab

Reputation: 16092

You don't want to use removeAttr, the prop method should suffice.

You shouldn't have to use .each either since most jquery methods called on jquery collections will already be executed on each object of said collection.

This works: http://jsfiddle.net/sFUBV/14/

$('.surveyor_radio').parent().parent().append('<div class="reset-button">A reset button</div>');

$('.reset-button').on('click', function () {
  $(this).
    closest('li.input').
    find('input[type=radio]').
    prop('checked', false);
});

There's no reason to add a :checked selector, since you're unchecking them all anyway what's it matter if you uncheck one that's not checked? Same thing happens either way.

Note also that you don't necessarily have to do it by question-id as the accepted answer indicates. This simply looks at all radio buttons within the current li.input, so you could use this anywhere without having to worry about question id's and interpolation nonsense.

Also you should be using on to bind events as opposed to click or live

Upvotes: 1

Jake Zeitz
Jake Zeitz

Reputation: 2564

This works:

$("input[type='radio']:checked").each(function () {
    $(this).removeAttr('checked');
});

check the fiddle: http://jsfiddle.net/sFUBV/9/

Upvotes: 0

Related Questions