JavaScript Tutorial/Form/Radio Button — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:24, 26 мая 2010
Содержание
- 1 An onclick Event Handler for Radio Buttons
- 2 Checking a Radio Button Group
- 3 Checking a Radio Button Group
- 3.1 Cycle the selected radio buttons
- 3.2 Radio
- 3.3 Radio.blur()
- 3.4 Radio.checked
- 3.5 Radio.click()
- 3.6 Radio.defaultChecked
- 3.7 Radio.focus()
- 3.8 Radio.form
- 3.9 Radio.handleEvent()
- 3.10 Radio.name
- 3.11 Radio.onBlur
- 3.12 Radio.onClick
- 3.13 Radio.onFocus()
- 3.14 Radio.type
- 3.15 Radio.value
- 3.16 With with RADIO and CheckBox
- 4 Customize Your Pizza
An onclick Event Handler for Radio Buttons
<source lang="javascript">
<html> <head> <title>Radio Button onClick Handler</title> <script type="text/javascript"> var myFlag = false function initValue() {
myFlag = document.forms[0].sizes[0].checked;
} function sh(form) {
for (var i = 0; i < form.sizes.length; i++) { if (form.sizes[i].checked) { break; } } alert(form.sizes[i].value);
} function setmyFlag(setting) {
myFlag = setting;
} function exitMsg() {
if (myFlag) { alert("exit message."); }
} </script>
</head> <body onload="initValue()" onunload="exitMsg()"> <form>
<input type="radio" name="sizes" value="1" checked="checked" onclick="setmyFlag(true)" />1 <input type="radio" name="sizes" value="2" onclick="setmyFlag(false)" />2 <input type="radio" name="sizes" value="7" onclick="setmyFlag(false)" />7 <input type="radio" name="sizes" value="5" onclick="setmyFlag(false)" />5 <input type="button" name="Viewer" value="View" onclick="sh(this.form)" /></p>
</form> </body> </html></source>
Checking a Radio Button Group
<source lang="javascript">
<html> <head> <title>Checking a Radio Button Group</title> <script language="javascript" type="text/javascript">
</script> </head> <body>
Checking a Radio Button Group
<form name="radioForm">
Radio Button 1: <input type="radio" name="myRadio" />
Radio Button 2: <input type="radio" name="myRadio" />
Radio Button 3: <input type="radio" name="myRadio" />
Radio Button 4: <input type="radio" name="myRadio" />
<input type="button" value="Eval Group" onclick="evalGroup()" />
</form> </body> </html></source>
Cycle the selected radio buttons
<source lang="javascript">
<html> <head> <title>Cycle</title> <script type="text/javascript"> function getSelectedButton(buttonGroup){
for (var i = 0; i < buttonGroup.length; i++) { if (buttonGroup[i].checked) { return i; } } return 0;
} function cycle(form) {
var i = getSelectedButton(form.sizes); if (i+1 == form.sizes.length) { form.sizes[0].checked = true; } else { form.sizes[i+1].checked = true; }
} </script> </head> <body> <form> <input type="radio" name="sizes" value="3" checked="checked" />3 <input type="radio" name="sizes" value="2" />2 <input type="radio" name="sizes" value="0" />0 <input type="radio" name="sizes" value="1" />1 <input type="button" name="Cycler" value="Cycle Buttons" onclick="cycle(this.form)" /> </form> </body> </html></source>
Radio
The Radio object represents a check box within an HTML form.
A check box is created using the HTML <input> tag and specifying the TYPE attribute as radio.
Property/Method Description blur() Removes focus from Radio object checked Specifies whether a button is checked or unchecked click() Simulates a mouse click on the button defaultChecked Refers to the CHECKED attribute of the HTML <input> tag focus() Sets the focus to a button form Refers to the Form object that contains the Radio object handleEvent() Invokes the default handler for the specified event name Refers to the NAME attribute of the HTML <input> tag onBlur Event handler for Blur event onClick Event handler for Click event onFocus Event handler for Focus event type Refers to the TYPE attribute of the HTML <input> tag value Refers to the VALUE attribute of the HTML <input> tag
<source lang="javascript">
<html>
<head> <title> Example of the Radio object title> </head> <body> <form name="form1"> <input type="radio" name=button1 ?onClick="alert(document.form1.button1.name)">Box 1
<input type="radio" name=button2>Box 2
</form> </body> </html></source>
Radio.blur()
The blur() method removes the focus from the check box.
<source lang="javascript">
<html>
<head> <title> Example of the radio blur method</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> <input type="radio" name=button1 CHECKED>Box 1
<input type="radio" name=button2>Box 2
<input type="button" value="Remove Focus" onClick="change()">
<input type="text" name="text1" size=15> </form> </body> </html></source>
Radio.checked
The checked property is a Boolean value used to determine whether a radio button is in a checked or unchecked state.
<source lang="javascript">
<html>
<head> <title> Example of the radio checked property</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> <input type="radio" name=button1>Box 1
<input type="radio" name=button2 CHECKED>Box 2
<INPUT type="button" value="Get Checked" onClick="checkButton()"> </form> </body> </html></source>
Radio.click()
The click() property simulates a mouse click on the radio button.
<source lang="javascript">
<html>
<head> <title> Example of the radio click property</title> </head> <body> By pressing the "Simulate Click" button below, box 2 becomes checked because a simulated mouse click is performed. <form name="form1"> <input type="radio" name=button1 CHECKED>Box 1
<input type="radio" name=button2>Box 2
<input type="button" value="Simulate Click" onClick="document.form1.button2.click()"> </form> </body> </html></source>
Radio.defaultChecked
The defaultChecked property is a Boolean value that reports which radio buttons contain the HTML CHECKED attribute.
If the CHECKED attribute is contained in the Radio object, true is returned. Otherwise, false is returned.
<source lang="javascript">
<html>
<head> <title> Example of the radio defaultChecked property</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> <input type="radio" name=button1>Box 1
<input type="radio" name=button2 CHECKED>Box 2
<input type="button" value="Get Default" onClick="checkBox()"> </form> </body> </html></source>
Radio.focus()
The focus() method sets the focus to the radio button.
<source lang="javascript">
<html>
<head> <title> Example of the radio focus method</title> </head> <body> <form name="form1"> <input type="radio" name=button1>Box 1
<input type="radio" name=button2>Box 2
<input type="button" value="Set Focus to Box 1" onClick="document.form1.button1.focus()"> </form> </body> </html></source>
Radio.form
The form property references the Form object that contains the Radio box.
<source lang="javascript">
<html>
<head> <title> Example of the radio form property</title> </head> <body> <form name="form1"> <input type="radio" name=button1>Box 1
<input type="radio" name=button2>Box 2
<input type="button" value="Get Form Name" onClick="alert("The form name is: " + document.form1.button1.form.name)"> </form> </body> </html></source>
Radio.handleEvent()
Syntax
<source lang="javascript">
radio.handleEvent(event)</source>
Radio.name
The name property represents the NAME attribute of the HTML <input> tag that creates the Radio button.
This allows you to reference a Radio object directly by name.
<source lang="javascript">
<html>
<head> <title> Example of the radio name property</title> </head> <body> <form name="form1"> <input type="radio" name=myButton>Box 1
<input type="button" value="Get Name" onClick="alert("The name of the button is: " + document.form1.myButton.name)"> </form> </body> </html></source>
Radio.onBlur
The onBlur property notifies you when the focus is removed from a radio button.
<source lang="javascript">
<html>
<head> <title> Example of the Radio onBlur event handler</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> Click the radio button first, then click in the text area.
<input type="radio" name=button1 onBlur="showChange()">Box 1
Click the text box <input type="text" name="text1" size=40>
</form> </body> </html></source>
Radio.onClick
The onClick property is an event handler that notifies you when the mouse has been clicked on the button.
<source lang="javascript">
<html>
<head> <title> Example of the radio onClick event handler</title> </head> <body> <form name="form1"> <input type="radio" name=button1 onClick="alert("This mouse was clicked on this object")">Box 1
</form> </body> </html></source>
Radio.onFocus()
The onFocus event handler is an event handler that notifies you when the focus is set on the radio button.
<source lang="javascript">
<html>
<head> <title> Example of the radio onFocus event handler</title> </head> <body> <script language="JavaScript"> </script> <form name="form1"> Click on the radio button
<input type="radio" name=button1 onFocus="showFocus()">Box 1 </form> </body> </html></source>
Radio.type
The type property represents the button"s TYPE HTML attribute. For this object, it is always radio.
<source lang="javascript">
<html>
<head> <title> Example of the radio type property</title> </head> <body> <form name="form1"> <input type="radio" name=button1>Box 1
<input type="button" value="Get Button Type" onClick="alert("The button type is: " + document.form1.button1.type)"> </form> </body> </html></source>
Radio.value
The value property represents the VALUE attribute of the HTML <input> tag used to create the radio button.
<source lang="javascript">
<html>
<head> <title> Example of the radio value property</title> </head> <body> <form name="form1"> <input type="radio" name=button1 value=1>Box 1
<input type="button" value="Get Button Value" onClick="alert("The button value is: " + document.form1.button1.value)"> </form> </body> </html></source>
With with RADIO and CheckBox
<source lang="javascript">
<HTML>
<HEAD> <TITLE>Customize Your Pizza</TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY>
Customize Your Pizza
<FORM NAME="form1">
<INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio1Clicked()">A |
<INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio2Clicked()">B |
<INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio3Clicked()">C |
<INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio4Clicked()">D |
<INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio5Clicked()">E |
<INPUT TYPE="CHECKBOX" NAME="check1" ONCLICK="displayCost()">F |
<INPUT TYPE="CHECKBOX" NAME="check2" ONCLICK="displayCost()">G |
<INPUT TYPE="CHECKBOX" NAME="check3" ONCLICK="displayCost()">H |
<INPUT TYPE="CHECKBOX" NAME="check4" ONCLICK="displayCost()">I |
<INPUT TYPE="CHECKBOX" NAME="check5" ONCLICK="displayCost()">J |
<INPUT NAME="text1"> </FORM> </BODY>
</HTML></source>