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.
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(){_x000D_
$("input[name='correctAnswer']").each(function(){_x000D_
if($(this).val() !== "1"){_x000D_
$(this).prop("checked",false);_x000D_
}_x000D_
});_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>_x000D_
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>_x000D_
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>_x000D_
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>_x000D_
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>_x000D_
<input type="button" id="go" value="go">
_x000D_
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">
Why don't you do:
$("#radio1, #radio2, #radio3, #radio4").checked = false;
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" />
Your problem is that the attribute selector doesn't start with a @
.
Try this:
$('input[name="correctAnswer"]').attr('checked', false);
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");
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.
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");
Although prop changed the checked status but change also show that in the form.
$('input[name="correctAnswer"]').prop('checked', false).change();
If you want to clear all radio buttons in the DOM:
$('input[type=radio]').prop('checked',false);
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');
Or
$('input[name="correctAnswer"]').removeAttr('checked');
<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');
Set all radio buttons back to the default:
$("input[name='correctAnswer']").checkboxradio( "refresh" );
Source: Stackoverflow.com