JavaScript Tutorial/Form/Radio Button

Содержание

1 An onclick Event Handler for Radio Buttons
2 Checking a Radio Button Group
3 Cycle the selected radio buttons
4 Radio
5 Radio.blur()
6 Radio.checked
7 Radio.click()
8 Radio.defaultChecked
9 Radio.focus()
10 Radio.form
11 Radio.handleEvent()
12 Radio.name
13 Radio.onBlur
14 Radio.onClick
15 Radio.onFocus()
16 Radio.type
17 Radio.value
18 With with RADIO and CheckBox

An onclick Event Handler for Radio Buttons

<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>

Checking a Radio Button Group

<html>
<head>
<title>Checking a Radio Button Group</title>
<script language="javascript" type="text/javascript">
<!--//
function evalGroup()
{
     var group = document.radioForm.myRadio;
     for (var i=0; i<group.length; i++) {
       if (group[i].checked)
          break;
     }
     if (i==group.length)
        return alert("No radio button is checked");
     alert("Radio Button " + (i+1) + " is checked.");
}
//-->
</script>
</head>
<body>
<h1>Checking a Radio Button Group</h1>
<form name="radioForm">
  Radio Button 1: <input type="radio" name="myRadio" /><br />
  Radio Button 2: <input type="radio" name="myRadio" /><br />
  Radio Button 3: <input type="radio" name="myRadio" /><br />
  Radio Button 4: <input type="radio" name="myRadio" /><br /><br />
  <input type="button" value="Eval Group" onclick="evalGroup()" />
</form>
</body>
</html>

Cycle the selected radio buttons

<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>

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

<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
    <br>
    <input type="radio" name=button2>Box 2
    <br>
    </form>
    </body>
    </html>

Radio.blur()

The blur() method removes the focus from the check box.

<html>
    <head>
    <title> Example of the radio blur method</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function change(){
        document.form1.button1.blur();
        document.form1.text1.value="Focus removed from button";
    }
    -->
    </script>
    <form name="form1">
    <input type="radio" name=button1 CHECKED>Box 1
    <br>
    <input type="radio" name=button2>Box 2
    <br>
    <input type="button" value="Remove Focus" onClick="change()">
    <br>
    <input type="text" name="text1" size=15>
    </form>
    </body>
    </html>

Radio.checked

The checked property is a Boolean value used to determine whether a radio button is in a checked or unchecked state.

<html>
    <head>
    <title> Example of the radio checked property</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function checkButton(){
        if(document.form1.button1.checked == true){
            alert("Box1 is checked");
        } else if(document.form1.button2.checked == true){
            alert("Box 2 is checked");
        }
    }
    -->
    </script>
    <form name="form1">
    <input type="radio" name=button1>Box 1
    <br>
    <input type="radio" name=button2 CHECKED>Box 2
    <br>
    <INPUT type="button" value="Get Checked" onClick="checkButton()">
    </form>
    </body>
    </html>

Radio.click()

The click() property simulates a mouse click on the radio button.

<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
    <br>
    <input type="radio" name=button2>Box 2
    <br>
    <input type="button" value="Simulate Click" onClick="document.form1.button2.click()">
    </form>
    </body>
    </html>

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.

<html>
    <head>
    <title> Example of the radio defaultChecked property</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function checkBox(){
        if(document.form1.button1.defaultChecked == true){
            alert("Box1 is checked by default");
        } else if(document.form1.button2.defaultChecked == true){
            alert("Box 2 is checked by default");
        }
    }
    -->
    </script>
    <form name="form1">
    <input type="radio" name=button1>Box 1
    <br>
    <input type="radio" name=button2 CHECKED>Box 2
    <br><br>
    <input type="button" value="Get Default" onClick="checkBox()">
    </form>
    </body>
    </html>

Radio.focus()

The focus() method sets the focus to the radio button.

<html>
    <head>
    <title> Example of the radio focus method</title>
    </head>
    <body>
    <form name="form1">
    <input type="radio" name=button1>Box 1
    <br>
    <input type="radio" name=button2>Box 2
    <br><br>
    <input type="button" value="Set Focus to Box 1" onClick="document.form1.button1.focus()">
    </form>
    </body>
    </html>

Radio.form

The form property references the Form object that contains the Radio box.

<html>
    <head>
    <title> Example of the radio form property</title>
    </head>
    <body>
    <form name="form1">
    <input type="radio" name=button1>Box 1
    <br>
    <input type="radio" name=button2>Box 2
    <br><br>
    <input type="button" value="Get Form Name"
      onClick="alert("The form name is: " + document.form1.button1.form.name)">
    </form>
    </body>
    </html>

Radio.handleEvent()

Syntax

radio.handleEvent(event)

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.

<html>
    <head>
    <title> Example of the radio name property</title>
    </head>
    <body>
    <form name="form1">
    <input type="radio" name=myButton>Box 1
    <br><br>
    <input type="button" value="Get Name" onClick="alert("The name of the button is: " +
            document.form1.myButton.name)">
    </form>
    </body>
    </html>

Radio.onBlur

The onBlur property notifies you when the focus is removed from a radio button.

<html>
    <head>
    <title> Example of the Radio onBlur event handler</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showChange(){
         document.form1.text1.value = "Focus removed from Radio Button";
    }
    -->
    </script>
    <form name="form1">
    Click the radio button first, then click in the text area.
    <br><br>
    <input type="radio" name=button1 onBlur="showChange()">Box 1
    <br>
    Click the text box
    <input type="text" name="text1" size=40>
    <br>
    </form>
    </body>
    </html>

Radio.onClick

The onClick property is an event handler that notifies you when the mouse has been clicked on the button.

<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
    <br>
    </form>
    </body>
    </html>

Radio.onFocus()

The onFocus event handler is an event handler that notifies you when the focus is set on the radio button.

<html>
    <head>
    <title> Example of the radio onFocus event handler</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showFocus(){
         alert("Focus set on Box 1");
    }
    -->
    </script>
    <form name="form1">
    Click on the radio button
    <br><br>
    <input type="radio" name=button1 onFocus="showFocus()">Box 1
    </form>
    </body>
    </html>

Radio.type

The type property represents the button"s TYPE HTML attribute. For this object, it is always radio.

<html>
    <head>
    <title> Example of the radio type property</title>
    </head>
    <body>
    <form name="form1">
    <input type="radio" name=button1>Box 1
    <br><br>
    <input type="button" value="Get Button Type"
    onClick="alert("The button type is: " + document.form1.button1.type)">
    </form>
    </body>
    </html>

Radio.value

The value property represents the VALUE attribute of the HTML <input> tag used to create the radio button.

<html>
    <head>
    <title> Example of the radio value property</title>
    </head>
    <body>
    <form name="form1">
    <input type="radio" name=button1 value=1>Box 1
    <br><br>
    <input type="button" value="Get Button Value"
    onClick="alert("The button value is: " + document.form1.button1.value)">
    </form>
    </body>
    </html>

With with RADIO and CheckBox

<HTML>
    <HEAD>
        <TITLE>Customize Your Pizza</TITLE>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
               function radio1Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }
               function radio2Clicked()
               {
                    clearCheckboxes()
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }
               function radio3Clicked()
               {
                    clearCheckboxes()
                    document.form1.check2.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }
               function radio4Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check2.checked = true
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    displayCost()
               }
               function radio5Clicked()
               {
                    clearCheckboxes()
                    document.form1.check1.checked = true
                    document.form1.check2.checked = true
                    document.form1.check3.checked = true
                    document.form1.check4.checked = true
                    document.form1.check5.checked = true
                    displayCost()
               }
               function clearCheckboxes()
               {
                    document.form1.check1.checked = false
                    document.form1.check2.checked = false
                    document.form1.check3.checked = false
                    document.form1.check4.checked = false
                    document.form1.check5.checked = false
               }
               function displayCost()
               {
                    var cost = 10.00
                    if(document.form1.check1.checked){
                        cost += .50
                    }
                    if(document.form1.check2.checked){
                        cost += .50
                    }
                    if(document.form1.check3.checked){
                        cost += .50
                    }
                    if(document.form1.check4.checked){
                        cost += .50
                    }
                    if(document.form1.check5.checked){
                        cost += .50
                    }
                    document.form1.text1.value = "Total cost: $" + cost.toPrecision(4)
               }
            //-->
       </SCRIPT>
    </HEAD>
    <BODY>
        <H1>Customize Your Pizza</H1>
        <BR>
        <FORM NAME="form1">
            <TABLE NAME="table1" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT">
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio1Clicked()">A</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio2Clicked()">B</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio3Clicked()">C</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio4Clicked()">D</TD></TR>
                <TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio5Clicked()">E</TD></TR>
            </TABLE>
            <TABLE NAME="table2" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT">
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check1" ONCLICK="displayCost()">F</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check2" ONCLICK="displayCost()">G</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check3" ONCLICK="displayCost()">H</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check4" ONCLICK="displayCost()">I</TD></TR>
                <TR><TD><INPUT TYPE="CHECKBOX" NAME="check5" ONCLICK="displayCost()">J</TD></TR>
            </TABLE>
            <BR CLEAR="ALL">
            <BR>
            <INPUT NAME="text1">
        </FORM>
    </BODY>
</HTML>