CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
bryan
bryan

Reputation: 9369

Clearing/Un-selecting Radio button on second click

I have a LOT of radio buttons on a form I'm creating.

The reason why I am using radio buttons and not check box's is because I only want to let a user select one or none.

The bad thing about a radio button though is, once selected, it can't be undone. I am trying to add the feature of clearing a group of radio box's when it's clicked for the second time.

My method that I am implementing now works if I have a group of radio buttons I want to target individually but not if I want to implement it for ALL radio button groups on the page.

When I use multiple radio button groups, it will randomly un-select a radio button when I try to select a different option.

If anyone could help me out, it would be greatly appreciated.

JSFIDDLE for only one group of radio buttons (works)

If you change to this code instead and target an individual name, it works.

$('input[name="rad"]').click(function()

JSFIDDLE for multiple groups of radio buttons (doesn't work)

I am trying to be able to target all my radio button groups at once, because there are a LOT.

$(function(){
    $('input[type="radio"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

Upvotes: 1

Views: 3599

Answers (3)

FiLeVeR10
FiLeVeR10

Reputation: 2165

So you just need a way to check/uncheck reliably by name groups.

Something like this should work:

$('input[type="radio"]').on('click change', function () {//on click/change    
    $(this).prop('checked')//if checked
    ? $(this).prop('checked',false).data('waschecked', false)//uncheck
    : $(this).prop('checked',true).data('waschecked', true)//else check
    .siblings('input[name="'+$(this).prop('name')+'"]').data('waschecked', false);//make siblings false
});

kept the .data('waschecked', ...) in case you needed to have that value, but it works without it like this:

$('input[type="radio"]').on('click change', function () {//on click/change    
    $(this).prop('checked')//if checked
    ? $(this).prop('checked',false)//uncheck
    : $(this).prop('checked',true);//else check
});

made a fiddle: http://jsfiddle.net/filever10/ZUb65/

Upvotes: 3

jammykam
jammykam

Reputation: 16990

Try changing the line to use the name attribute of the clicked radio in the selector expression

$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);

You just need to clear your "waschecked" flag on the other radios of the same group.

http://jsfiddle.net/jammykam/BtLxY/15/

And just in case you do need to target using onchange: http://jsfiddle.net/jammykam/BtLxY/27/

$('input[type="radio"]').on('change', function(){
    var $radio = $(this);

    // if this was previously checked
    if ($radio.data('waschecked') == true)
    {
        $radio.prop('checked', false);
        $radio.data('waschecked', false);
    }
    else
        $radio.data('waschecked', true);

    // remove was checked from other radios
    $radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
});

Upvotes: 2

MonkeyZeus
MonkeyZeus

Reputation: 20737

If you are using a simple primary to secondary relationship then try this out:

$('input[type="radio"][name="main_radios"]').on('change', function(){

    $('input[type="radio"][name="secondary_radios"]').prop('checked', false);
    $('input[type="radio"][name="third_radios"]').prop('checked', false);
    $('input[type="radio"][name="fourth_radios"]').prop('checked', false);

    // combine it all into one call if you really feel like it
    $('input[type="radio"][name="secondary_radios"], input[type="radio"][name="third_radios"], input[type="radio"][name="fourth_radios"]').prop('checked', false);

});

Uncheck all radios that are not "this" name

// Listen for ANY radio to be changed
$('input[type="radio"]').on('change', function(){

    // remember name of selected radio
    var checked_name = $(this).attr('name');

    // target only radios that are not "this" name and uncheck them
    $('input[type="radio"]').filter(function(){
        if($(this).attr('name') != checked_name){
            return true;
        }
        else{
            return false;
        }
    }).prop('checked', false);

});

Upvotes: 0

Related Questions