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.
This question is related to
javascript
jquery
radio-button
dynamic-forms
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("");
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);
You can use this JQuery for uncheck radiobutton
$('input:radio[name="IntroducerType"]').removeAttr('checked');
$('input:radio[name="IntroducerType"]').prop('checked', false);
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 );
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.
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/
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;
}
}})());
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
}
});
});
$('#frm input[type="radio":checked]').each(function(){
$(this).checked = false;
});
This is almost good but you missed the [0]
Correct ->> $(this)[0].checked = false;
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.
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
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]
Use this
$("input[name='nameOfYourRadioButton']").attr("checked", false);
Try
$(this).attr("checked" , false );
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');
}
});
});
Source: Stackoverflow.com