Modifying checkboxes based on radio button selections
By: N Rohler
Introduction
Sometimes, you’ll have a form with some radio buttons. Based on the selection, you want to check or uncheck a checkbox.
For example, you have a contact form. You ask the user how interested they are in purchasing, with three options - Very, Moderate, or No Interest. If they select Very or Moderate, you want to check a checkbox asking them if a sales representative should contact them. If they select No Interest, you want to uncheck the checkbox.
To accomplish this effect, we have to use some javascript. This tutorials will show you how.
Download Sample Files [ZIP 1K]
The sample files contain the completed file.
Creating the form
First, insert a form into the document using the Insert Bar.
Name the form contactform. If this were a real page, you would fill in the action, too.
Now, create the content inside the form as shown below. Don’t worry about naming any of the form elements yet; we’ll do that in a moment.
Now that we have the actual design complete, we’ll name the elements. First, name all of the radio buttons interest, so that they are all a group. Set the ‘Checked Value’ for them as follows - Radio #1: very, Radio #2: moderate, Radio #3: none.
Now, name the checkbox contactme.
Adding the actual JavaScript
Switch to code view. We now will add the JavaScript which will triggered when the radio buttons are clicked. This event is the onClick event. We will add a reference to the yet to be created function interestChange, passing a reference to the radio button itself as the only parameter. The actual code will look like this:
Very Interested<br>
<input name="interest" type="radio" value="moderate" onClick="interestChange(this);">
Moderatedly Interested<br>
<input name="radiobutton" type="radio" value="none" onClick="interestChange(this);">
It will look like this once you add it to your page:
Now that we created a reference to the function interestChange, we’ll actually create it. First, open a blank Javascript block like this, and create the function interestChange:
As you see, we accept the parameter from the radio button as radio. Next, we will get the checked value from the radio button, by referencing the .value property of it. Also, we create the variable checkbox to reference the contactme checkbox in the contactform form. The Javascript within the function should now look like this:
var value = radio.value;
//Now, we define the checkbox, "contactme", that will be modified
var checkbox = document.forms[’contactform’].contactme;
Now we write a simple if statement to check the checkbox, if the radio button’s value is very or moderate. Otherwise, we uncheck the checkbox:
if (value==’very’ || value==’moderate’) {
checkbox.checked = true;
} else {
checkbox.checked = false;
}
The entire JavaScript block should now look like this:
Testing it out
The page is complete, so open it in a browser. You should see the form. When you click the ‘Very Interested’ or ‘Moderately Interested’ radio buttons, the checkbox should become checked. If you select ‘Not Interested’, the checkbox should become unchecked.
Conclusion
Using some easy JavaScript, you learned how to modify the state of a checkbox based on a radio button selection. Look for more tutorials dealing with JavaScript form interaction!
Until next time, happy coding 
