Sometimes you will need to clear only part of a form, so a plain old HTML reset button won't quite do.
In this example, if a user checks any button from the "Candy" group, the Vegetables radio group is cleared. If they check any button from the "Vegetables" group, the Candy radio group is cleared.
This is accomplished by calling a function which loops through the set of radio buttons. Using an if statement, it checks to see if a button from the radio group is checked by testing the checked property for a true value. If a button is checked, it is unchecked by setting the checked property to false.
function clearButtons(buttonGroup){
for (i=0; i < buttonGroup.length; i++) {
if (buttonGroup[i].checked == true) {
buttonGroup[i].checked = false
}
}
}
We can use one generic function to clear either group by using an argument that represents each individual group. The argument, "buttonGroup" is defined when a call to the function is made from within an onclick event handler located in each radio button.
When a button from the sweets group is checked, the document object path to the veggies radio group is passed to the function that unchecks buttons in that group. When a button from the veggies group is checked, the document object path to the sweets group is passed to the function and any button checked in the sweets group is cleared.
<form name="clearIt">
<input type="radio" name="sweets" onClick="clearButtons(document.clearIt.veggies)">
<input type="radio" name="veggies" onClick="clearButtons(document.clearIt.sweets)">
</form>
Different Form Elements Types with the Same Name
We can even include checkboxes in the groups just by giving them the same name as the radio groups we want to associate them with. Now when a Veggies radio button is clicked, the Candy checkbox is cleared along with a checked candy button, and vice versa.
<input type="radio" name="sweets" onClick="clearButtons(document.clearIt2.veggies);document.clearIt2.sweets[0].checked=true"> Ice Cream
Another small snippet is included inline following the call to the function that checks a header checkbox when an associated radio button is checked.
View the Source