JavaScript Tutorial/Form/Radio Button

Материал из Web эксперт
Перейти к: навигация, поиск

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>