CODEWITHSUNDEEP
javascriptjquery
Lee
Lee

Reputation: 1280

Jquery uncheck radio button not working

This should be the right code but its not working

<input type="radio" name="test">1
<input type="radio" name="test">2

$('input[name=test]').click(function() { 
    $('input[name=test]').attr(‘checked’,false);
});

example here

http://jsfiddle.net/8jKJc/16/

EDIT:

I forgot the line that should say if its checked then uncheck it

Upvotes: 0

Views: 6673

Answers (4)

Renaat De Muynck
Renaat De Muynck

Reputation: 3347

I know this is an old post but I have an even more elegant solution:

$('input[type="radio"]').mouseup(function () {
    if ($(this).prop('checked')) {
        $(this).one('click', function () {
            $(this).prop('checked', false);
        });
    }
});

It attaches a mouseup handler to the radio button. This is because apparently the state of the radio button is already changed somewhere between the mouseup and the click event. When you release the mouse button, we know the current state of the radio button. Only if it is checked, we attach a one-time click handler to the radio button that unchecks it.

UPDATE:

I've made a jQuery plugin for this. It also supports clicking on labels and only captures left mouse clicks.

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

Change .attr to .prop and it will work fine. You will also need to change the quotes you are using around "checked" to be the right type, as that is also causing it to break at the moment:

$('input[name=test]').click(function() { 
    $(this).prop('checked',false);
});

You can see this working in this example fiddle.

Update (based on comment)

Now that I actually understand what is required, a different approach is needed. You need to remember the previous value of the checked property, by storing it in an attribute:

$('input[name=test]').click(function(e) { 
    var previous = $(this).attr('previous');
    if(previous){
        $(this).prop('checked', false)
    }
    $(this).attr('previous', $(this).prop('checked'));
});

See this working here.

Update 2 (based on further comments)

The above code from the first update does not quite work, because when clicking a different radio button in the set, the previous attribute of the previously checked radio remains set, but the radio is not actually checked. We can avoid this as follows:

var previousElem;
$('input[name=test]').click(function(e) { 
    var previous = $(this).attr('previous');
    if(previous && previousElem === this){
        $(this).prop('checked', false);
    }
    previousElem = this;
    $(this).attr('previous', $(this).prop('checked'));
});

Upvotes: 6

Alnitak
Alnitak

Reputation: 339816

To remove the 'checked' property if using jQuery 1.6+

$('input[name=test]').filter(':checked').prop('checked', false);

For earlier versions:

$('input[name=test]').filter(':checked').removeAttr('checked');

EDIT to fix the OPs actual problem, i.e. how do you make all radio buttons in a set unchecked when the currently selected button is clicked, this works (in Chrome 12, at least):

$('input[name=test]').click(function(e) {

    // find out whether it was already checked
    var wasChecked = $(this).data('checked') || false;

    // ensure all buttons think they're unchecked 
    $('input[name=test]').data('checked', false);

    if (wasChecked) {
        // leave them all unchecked
        this.checked = false;
    } else {
       // just check this one
       this.checked = true;
       $(this).data('checked', true);
    }
});

Working demo at http://jsfiddle.net/alnitak/qHepU/

Upvotes: 1

brymck
brymck

Reputation: 7663

$('input[name=test]').prop('checked', false);

For jQuery 1.6+ you can use .prop() for values like this:

Fixed jsFiddle

This, of course, assumes that your goal is to tempt users with the prospect of a checked radio button only to deny them.

Upvotes: 0

Related Questions