I have group of radio buttons that I want to uncheck after an AJAX form is submitted using jQuery. I have the following function:
function clearForm(){
$('#frm input[type="text"]').each(function(){
$(this).val("");
});
$('#frm input[type="radio":checked]').each(function(){
$(this).checked = false;
});
}
With the help of this function, I can clear the values at the text boxes, but I can't clear the values of the radio buttons.
By the way, I also tried $(this).val(""); but that didn't work.
either (plain js)
this.checked = false;
or (jQuery)
$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);
See jQuery prop() help page for an explanation on the difference between attr() and prop() and why prop() is now preferable.
prop() was introduced with jQuery 1.6 in May 2011.
You wouldn't need the each function
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
The same should also apply to your textbox:
$('#frm input[type="text"]').val("");
But you could improve this
$('#frm input:text').val("");
Try
$(this).removeAttr('checked')
Since a lot of browsers will interpret 'checked=anything' as true. This will remove the checked attribute altogether.
Hope this helps.
Slight modification of Laurynas' plugin based on Igor's code. This accommodates possible labels associated with the radio buttons being targeted:
(function ($) {
$.fn.uncheckableRadio = function () {
return this.each(function () {
var radio = this;
$('label[for="' + radio.id + '"]').add(radio).mousedown(function () {
$(radio).data('wasChecked', radio.checked);
});
$('label[for="' + radio.id + '"]').add(radio).click(function () {
if ($(radio).data('wasChecked'))
radio.checked = false;
});
});
};
})(jQuery);
Thanks Patrick, you made my day! It's mousedown you have to use. However I've improved the code so you can handle a group of radio buttons.
//We need to bind click handler as well
//as FF sets button checked after mousedown, but before click
$('input:radio').bind('click mousedown', (function() {
//Capture radio button status within its handler scope,
//so we do not use any global vars and every radio button keeps its own status.
//This required to uncheck them later.
//We need to store status separately as browser updates checked status before click handler called,
//so radio button will always be checked.
var isChecked;
return function(event) {
//console.log(event.type + ": " + this.checked);
if(event.type == 'click') {
//console.log(isChecked);
if(isChecked) {
//Uncheck and update status
isChecked = this.checked = false;
} else {
//Update status
//Browser will check the button by itself
isChecked = true;
//Do something else if radio button selected
/*
if(this.value == 'somevalue') {
doSomething();
} else {
doSomethingElse();
}
*/
}
} else {
//Get the right status before browser sets it
//We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
isChecked = this.checked;
}
}})());
Rewrite of Igor's code as plugin.
Use:
$('input[type=radio]').uncheckableRadio();
Plugin:
(function( $ ){
$.fn.uncheckableRadio = function() {
return this.each(function() {
$(this).mousedown(function() {
$(this).data('wasChecked', this.checked);
});
$(this).click(function() {
if ($(this).data('wasChecked'))
this.checked = false;
});
});
};
})( jQuery );
For radio and radio group:
$(document).ready(function() {
$(document).find("input:checked[type='radio']").addClass('bounce');
$("input[type='radio']").click(function() {
$(this).prop('checked', false);
$(this).toggleClass('bounce');
if( $(this).hasClass('bounce') ) {
$(this).prop('checked', true);
$(document).find("input:not(:checked)[type='radio']").removeClass('bounce');
}
});
});
Try this, this will do the trick:
$(document).ready(function() {
$("input[type='radio']").mousedown(function(e) {
if ($(this).attr("checked") == true) {
setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);}
else {
return true
}
});
});
Try
$(this).attr("checked" , false );
You can also simulate the radiobutton behavior using only checkboxes:
<input type="checkbox" class="fakeRadio" checked />
<input type="checkbox" class="fakeRadio" />
<input type="checkbox" class="fakeRadio" />
Then, you can use this simple code to work for you:
$(".fakeRadio").click(function(){
$(".fakeRadio").prop( "checked", false );
$(this).prop( "checked", true );
});
It works fine and you have more control over the behavior of each button.
You can try it by yourself at: http://jsfiddle.net/almircampos/n1zvrs0c/
This fork also let's you unselect all as requested in a comment: http://jsfiddle.net/5ry8n4f4/
Just put the following code for jQuery :
jQuery("input:radio").removeAttr("checked");
And for javascript :
$("input:radio").removeAttr("checked");
There is no need to put any foreach loop , .each() fubction or any thing
Use this
$("input[name='nameOfYourRadioButton']").attr("checked", false);
$('#frm input[type="radio":checked]').each(function(){
$(this).checked = false;
});
This is almost good but you missed the [0]
Correct ->> $(this)[0].checked = false;
You can use this JQuery for uncheck radiobutton
$('input:radio[name="IntroducerType"]').removeAttr('checked');
$('input:radio[name="IntroducerType"]').prop('checked', false);
function setRadio(obj)
{
if($("input[name='r_"+obj.value+"']").val() == 0 ){
obj.checked = true
$("input[name='r_"+obj.value+"']").val(1);
}else{
obj.checked = false;
$("input[name='r_"+obj.value+"']").val(0);
}
}
<input type="radio" id="planoT" name="planoT[{ID_PLANO}]" value="{ID_PLANO}" onclick="setRadio(this)" > <input type="hidden" id="r_{ID_PLANO}" name="r_{ID_PLANO}" value="0" >
:D
$('input[id^="rad"]').dblclick(function(){
var nombre = $(this).attr('id');
var checked = $(this).is(":checked") ;
if(checked){
$("input[id="+nombre+"]:radio").prop( "checked", false );
}
});
Every time you have a double click in a checked radio the checked changes to false
My radios begin with id=radxxxxxxxx because I use this id selector.
function clearForm(){
$('#frm input[type="text"]').each(function(){
$(this).val("");
});
$('#frm input[type="radio":checked]').each(function(){
$(this).attr('checked', false);
});
}
The correct selector is: #frm input[type="radio"]:checked
not #frm input[type="radio":checked]
来源：https://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button