I have the radio button with the name "Choose" with the options yeas and no. If i selects any one ofthe option and clicking the button "clear", i need javascript to clear the selected option. So how to proceed with that.
Thanks
+4
A:
This should work. Make sure each button has a unique ID. (Replace Choose_Yes and Choose_No with the IDs of your two radio buttons)
document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;
An example of how the radio buttons should be named:
<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No
Shawn Steward
2010-03-31 15:15:58
If i have one common id means, then how could i proceed?
i2ijeya
2010-03-31 15:19:12
You need to change it to separate IDs. You should not have more than one of the same ID on a page. You need to use the same Name to make it a radio button group, but the ID has to be unique.
Shawn Steward
2010-03-31 15:19:58
@i2ijeya I would use a library such as http://jquery.com/ where I could select by class if I wanted to select more radio buttons at once. You could also use document.getElementsByName("Choose").
David Andersson
2010-03-31 15:27:58
While jQuery is great, it does not need to be used for every little bit of JavaScript. In this case it would just be unnecessary overhead for something that's pretty simple to do in plain JavaScript.
Shawn Steward
2010-03-31 15:31:00
As David says, you can access by _name_, so _id_ isn't required for this function. Also, I suspect a typo -- your _value_ is the same for both buttons.
NVRAM
2010-03-31 15:48:51
Thanks, stupid copy/paste! :)
Shawn Steward
2010-04-01 16:35:40
A:
YES<input type="radio" name="group1" id="sal" value="YES" >
NO<input type="radio" name="group1" id="sal1" value="NO" >
<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">
Salil
2010-03-31 15:17:46
That won't actually work if NO is checked because javascript will never see the 2nd element with the same ID.
Shawn Steward
2010-03-31 15:28:25
+1
A:
Wouldn't a better alternative be to just add a third button ("neither") that will give the same result as none selected?
Jasper De Bruijn
2010-03-31 15:42:47
I quote this solution. Radio buttons, as a UI element, are not meant to be reset (ie: none of them checked). They are designed to start with 1 option checked, and the possibility to change it. You may consider to change your radio buttons to a dropdown list: {empty}|Yes|No
Filini
2010-03-31 15:52:49
@Filini Windows forms programming has 3-state radio buttons, not sure why they can't be used for the Web.
Shawn Steward
2010-04-01 14:05:32
@Shawn, are you sure you are not thinking about tri-state checkboxes? Anyway, how does this relate to the possibility to reset a radio button?
Filini
2010-04-03 17:14:42
A:
You don't need to have unique id for the elements, you can access them by their name attribute:
If you're using name="Choose", then:
With jQuery it is as simple as:
$('input[name=Choose]').attr('checked',false);or in pure Javascript:
var ele = document.getElementsByName("Choose"); for(var i=0;i<ele.length;i++) ele[i].checked = false;
NVRAM
2010-03-31 15:44:38
A:
Simple, no jQuery required:
<a href="javascript:clearChecks('group1')">clear</a>
<script type="text/javascript">
function clearChecks(radioName) {
var radio = document.form1[radioName]
for(x=0;x<radio.length;x++) {
document.form1[radioName][x].checked = false
}
}
</script>
Diodeus
2010-03-31 15:46:52