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.
精彩评论