开发者

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 t开发者_运维问答hen uncheck it


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


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/


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜