How to reset radiobuttons in jQuery so that none is checked
JqueryFormsJquery Problem Overview
I have radio buttons in HTML like this:
<td>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>
This is in a form tag, and when user submits a form I want to make all the radio buttons back to the default. Meaning none of them checked.
I have this code but it gives an error saying [0] is null or not an object
$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;
I am doing this in IE 6.
Jquery Solutions
Solution 1 - Jquery
In versions of jQuery before 1.6 use:
$('input[name="correctAnswer"]').attr('checked', false);
In versions of jQuery after 1.6 you should use:
$('input[name="correctAnswer"]').prop('checked', false);
but if you are using 1.6.1+ you can use the first form (see note 2 below).
Note 1: it is important that the second argument be false and not "false" since "false" is not a falsy value. i.e.
if ("false") {
alert("Truthy value. You will see an alert");
}
Note 2: As of jQuery 1.6.0, there are now two similar methods, .attr
and .prop
that do two related but slightly different things. If in this particular case, the advice provide above works if you use 1.6.1+. The above will not work with 1.6.0, if you are using 1.6.0, you should upgrade. If you want the details, keep reading.
Details: When working with straight HTML DOM elements, there are properties attached to the DOM element (checked
, type
, value
, etc) which provide an interface to the running state of the HTML page. There is also the .getAttribute
/.setAttribute
interface which provides access to the HTML Attribute values as provided in the HTML. Before 1.6 jQuery blurred the distinction by providing one method, .attr
, to access both types of values. jQuery 1.6+ provides two methods, .attr
and .prop
to get distinguish between these situations.
.prop
allows you to set a property on a DOM element, while .attr
allows you to set an HTML attribute value. If you are working with plain DOM and set the checked property, elem.checked
, to true
or false
you change the running value (what the user sees) and the value returned tracks the on page state. elem.getAttribute('checked')
however only returns the initial state (and returns 'checked'
or undefined
depending on the initial state from the HTML). In 1.6.1+ using .attr('checked', false)
does both elem.removeAttribute('checked')
and elem.checked = false
since the change caused a lot of backwards compatibility issues and it can't really tell if you wanted to set the HTML attribute or the DOM property. See more information in the documentation for .prop.
Solution 2 - Jquery
The best way to set radiobuttons state in jquery:
HTML:
<input type="radio" name="color" value="orange" /> Orange
<input type="radio" name="color" value="pink" /> Pink
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple
Jquery (1.4+) code to pre-select one button :
var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");
In Jquery 1.6+ code the .prop() method is preferred :
var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);
To unselect the buttons :
$("[name=color]").removeAttr("checked");
Solution 3 - Jquery
Your problem is that the attribute selector doesn't start with a @
.
Try this:
$('input[name="correctAnswer"]').attr('checked', false);
Solution 4 - Jquery
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');
Or
$('input[name="correctAnswer"]').removeAttr('checked');
Solution 5 - Jquery
Finally after a lot of tests, I think the most convenient and efficient way to preset is:
var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only
The refresh is required with the JQueryUI object.
Retrieving the value is easy :
alert($('input[name=correctAnswer]:checked').val())
Tested with JQuery 1.6.1, JQuery UI 1.8.
Solution 6 - Jquery
I know this is old and that this is a little off topic, but supposing you wanted to uncheck only specific radio buttons in a collection:
$("#go").click(function(){
$("input[name='correctAnswer']").each(function(){
if($(this).val() !== "1"){
$(this).prop("checked",false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">
And if you are dealing with a radiobutton list, you can use the :checked selector to get just the one you want.
$("#go").click(function(){
$("input[name='correctAnswer']:checked").prop("checked",false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">
Solution 7 - Jquery
Although prop changed the checked status but change also show that in the form.
$('input[name="correctAnswer"]').prop('checked', false).change();
Solution 8 - Jquery
Radio button set checked through jquery:
<div id="somediv" >
<input type="radio" name="enddate" value="1" />
<input type="radio" name="enddate" value="2" />
<input type="radio" name="enddate" value="3" />
</div>
jquery code:
$('div#somediv input:radio:nth(0)').attr("checked","checked");
Solution 9 - Jquery
If you want to clear all radio buttons in the DOM:
$('input[type=radio]').prop('checked',false);
Solution 10 - Jquery
<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>
$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.
$( "#radio" ).buttonset('refresh');
Solution 11 - Jquery
Where you have: <input type="radio" name="enddate" value="1" />
After value= "1" you can also just add unchecked =" false" />
The line will then be:
<input type="radio" name="enddate" value="1" unchecked =" false" />
Solution 12 - Jquery
Set all radio buttons back to the default:
$("input[name='correctAnswer']").checkboxradio( "refresh" );
Solution 13 - Jquery
Why don't you do:
$("#radio1, #radio2, #radio3, #radio4").checked = false;