Select Radio Inputs JavaScript
This JavaScript function is designed to allow you to set all radio inputs in a form to the value passed into the function.
smo_selectRadioValues(value,theElements)
value is the value to set all radio inputs in the form. theElements should be a comma separated list of the ids of elements to target. Below are examples.
To use this function add the following line of code to your HTML head:
Set With Buttons
Set with Radios
Example Code used above:
<div> <h2>Set With Buttons</h2> <button onclick="smo_selectRadioValues('yes','theRadioForm')">Choose All Yes</button> <button onclick="smo_selectRadioValues('no','theRadioForm')">Choose All No</button> <button onclick="smo_selectRadioValues('maybe','theRadioForm')">Choose All Maybe</button> <br /> <button onclick="smo_selectRadioValues('maybe','theRadioForm,anotherForm')">Choose All Maybe in Both Following Forms</button> </div>
<div> <h2>Set with Radios</h2> <form id="anotherForm" action="/"> <fieldset id="afieldset"> <legend>Set Values</legend> <label for="yesController">Yes</label> <input type="radio" value="yes" name="answerController" id="yesController" onclick="smo_selectRadioValues(this.value,'theRadioForm')"/> <label for="noController">No</label> <input type="radio" value="no" name="answerController" id="noController" onclick="smo_selectRadioValues(this.value,'theRadioForm')"/> <label for="maybeController">Maybe</label> <input type="radio" value="maybe" name="answerController" id="maybeController" onclick="smo_selectRadioValues(this.value,'theRadioForm')"/> </fieldset> </form>
</div> <form id="theRadioForm" action="/"> <fieldset id="hithere"> <legend>Radio Test</legend>
<div id="box1" class="displayCell"> <label for="yes1">Yes</label> <input type="radio" value="yes" name="answer1" id="yes1"/> <label for="no1">No</label> <input type="radio" value="no" name="answer1" id="no1"/> <label for="maybe1">Maybe</label> <input type="radio" value="maybe" name="answer1" id="maybe1"/> </div>
<div id="box2" class="displayCell"> <label for="yes2">Yes</label> <input type="radio" value="yes" name="answer2" id="yes2"/> <label for="no2">No</label> <input type="radio" value="no" name="answer2" id="no2"/> <label for="maybe2">Maybe</label> <input type="radio" value="maybe" name="answer2" id="maybe2"/> </div>
<div id="box3" class="displayCell"> <label for="yes3">Yes</label> <input type="radio" value="yes" name="answer3" id="yes3"/> <label for="no3">No</label> <input type="radio" value="no" name="answer3" id="no3"/> <label for="maybe3">Maybe</label> <input type="radio" value="maybe" name="answer3" id="maybe3"/> </div>
<div id="box4" class="displayCell"> <label for="yes4">Yes</label> <input type="radio" value="yes" name="answer4" id="yes4"/> <label for="no4">No</label> <input type="radio" value="no" name="answer4" id="no4"/> <label for="maybe4">Maybe</label> <input type="radio" value="maybe" name="answer4" id="maybe4"/> </div> </fieldset> </form>
- Search for JavaScript articles similar to "Select Radio Inputs JavaScript".
- Search all articles similar to "Select Radio Inputs JavaScript".
- List all JavaScript articles by Shawn Olson.
- List JavaScript articles from all authors.
More in the Free Useful Javascripts Series
- Strip Character and Whitespace in JavaScript Function
- Altering CSS Class Attributes with JavaScript
- Select All Checkboxes in a Form with JavaScript
- Using an Object Id with JavaScript
- InnerHTML JavaScript Functions
- Hide Select Menus JavaScript
- Select Some Checkboxes JavaScript Function
- [ Select Radio Inputs JavaScript ]
- UseMaps Crash IE When Changed
