| Member List |
| Posted: 11 Nov 2006 15:52 | ||
|
|
Registered User Currently Offline |
Posts: 69 Join Date: Nov 2006 |
|
Radio buttons are slightly different from Checkboxes. Because a radio button is really one of a group of buttons, only one of which can be checked at any time, these buttons are accessed as one object.
Consider this form:- Code:
<form id="characterForm" action=""> <fieldset> <lengend>Characters</legend> <p> My Favorite character is: </p> <input type="radio" id="characterA" name="character" value="Marvin"> <label for="characterA"> Marvin </label> <input type="radio" id="characterB" name="character" value="Trillian"> <label for="characterB"> Trillian </label> </fieldset> </form> Here each of the radio buttons that has the name attribute character will be stored under the same form element: Code:
var characterGroup = document.forms["characterForm"]["character"]; The variable characterGroup is now a collection that represents the group of radio buttons with the name attribute character. So, to access the first radio button in the group, you provide its array index to the collection: Code:
var characterGroup = document.forms["characterForm"]["character"]; var character1 = characterGroup[0]; This is really just one extra layer of access: once you've located the particular radio button you need, it has the same value and checked properties as a checkbox: Code:
var characterGroup = document.forms["characterForm"]["character"]; var currValue = characterGroup[0].value; var currChecked = characterGroup[0].checked; One trick to remember when working with radio buttons is that cant determine which radio button (if any) is checked by reading just one property. You must loop through each of the radio buttons in a group, and the checked property of each, to determine which is checked: Code:
var characterGroup = document.forums["characterForm"]["character"]; for (var j = 0; j < characterGroup.length; j++) { if (characterGroup[j].checked == true) { alert("Your favorite character is "+characterGroup[j].value); } } You needn't worry about having to do this when writing the checked property of a radio button, though. When you change a radio button's checked property to true, it will automaticly set all others to false. __________________ my own tutorial website... i love it... yeah i really do. marry me ..
http://www.tutorials-expert.com |
||