javascript - Jquery uncheck radio button not working - Stack Overflow

admin管理员组

文章数量:1317909

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

/

EDIT:

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

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/8jKJc/16/

EDIT:

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

• javascript
• jquery

Share Improve this question Follow edited Jun 24, 2011 at 12:19 Lee asked Jun 24, 2011 at 12:10 LeeLee 1,28044 gold badges1818 silver badges3737 bronze badges 7

• What exactly are you trying to do? According to your code it would not check anything when you click them, but if that's your goal then you should just add the disabled property. Can you give more detail about your end goal. – Seth Commented Jun 24, 2011 at 12:14
• Wouldn't it be easier to give those two radios the "disabled" attribute? (edit: heh seems Seth and I have the same impression ;) – Drav Sloan Commented Jun 24, 2011 at 12:14
• uncheck which? You appear to be asking for a click on either checked element clearing the check on both ? – Alnitak Commented Jun 24, 2011 at 12:28
• I need the radio buttons to be checked either 1 at a time or if a already checked button it clicked then it unchecks – Lee Commented Jun 24, 2011 at 12:29
• @Lee unchecks both or just that one? If the latter, no code is needed! – Alnitak Commented Jun 24, 2011 at 12:32

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 6

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 ment)

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 ments)

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'));
});

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/alnitak/qHepU/

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.

$('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.

本文标签： javascriptJquery uncheck radio button not workingStack Overflow