JavaScript DHTML/Form Control/RadioButton Radio

Содержание

1 An onClick event Handler for Radio Buttons
2 Check a Radio Button
3 Cycle the selected radio buttons
4 "defaultChecked" Example
5 Determining the Value of the Selected Radio Button
6 Finding the Selected Button in a Radio Group
7 Get the radio button selection
8 Get the select radio button and its value
9 Methods and Properties of the Radio Object
10 Radio action
11 Radio buttons in a form
12 Radio Button status Example
13 Scripting a Group of Radio Objects
14 Using the onPropertyChange Property

An onClick event Handler for Radio Buttons

  
<HTML>
<HEAD>
<TITLE>Radio Button onClick Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var myOption = false
function initValue() {
    myOption = document.forms[0].songs[3].checked
}
 function fullName(form) {
    for (var i = 0; i < form.songs.length; i++) {
        if (form.songs[i].checked) {
            break
        }
    }
    alert("You chose " + form.songs[i].value + ".")
}
function setShemp(setting) {
    myOption = setting
}
function exitMsg() {
    if (myOption) {
        alert("You like My Option?")
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="initValue()" onUnload="exitMsg()">
<FORM>
<B>Select your favorite song:</B><P>
<INPUT TYPE="radio" NAME="songs" VALUE="A" CHECKED onClick="setShemp(false)">A
<INPUT TYPE="radio" NAME="songs" VALUE="B" onClick="setShemp(false)">B
<INPUT TYPE="radio" NAME="songs" VALUE="C" onClick="setShemp(false)">C
<INPUT TYPE="radio" NAME="songs" VALUE="D" onClick="setShemp(true)">D<P>
<INPUT TYPE="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName(this.form)">
</FORM>
</BODY>
</HTML>

Check a Radio Button

  
    
<html>
<body>
<form>
<script>
    function function1() {
        document.all.myRadioButton1.checked = true;
    }
    function function2() {
        document.all.myRadioButton2.checked = true;
    }
    function function3() {
        document.all.myRadioButton3.checked = true;
    }
    function function4() {
        document.all.myRadioButton4.checked = true;
    }
</script>
<input id="myRadioButton1" type="radio" name="radiobutton" value="radiobutton">VISA
<input id="myRadioButton2" type="radio" name="radiobutton" value="radiobutton">MASTERCARD
<input id="myRadioButton3" type="radio" name="radiobutton" value="radiobutton">DISCOVER
<input id="myRadioButton4" type="radio" name="radiobutton" value="radiobutton">AMERICAN EXPRESS
<br>
<input type="button" value="VISA checked" onClick="function1();">
<input type="button" value="MASTERCARD checked" onClick="function2();">
<input type="button" value="DISCOVER checked" onClick="function3();">
<input type="button" value="AMERICAN EXPRESS checked" onClick="function4();">
</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>

"defaultChecked" Example

  
    
<html>
<body>
<script language="JavaScript">
function function1() {
    if (myRadioButton1.defaultChecked) {
        alert("Radio 1 is checked");
    }
    if (myRadioButton2.defaultChecked) {
        alert("Radio 2 is checked");
    }
    if (myCheckBox.defaultChecked) {
        alert("Checkbox is checked");
    } 
} 
</script>
<input id="myRadioButton1" type="radio" checked value="radiobutton">Radio 1<br>
<input id="myRadioButton2" type="radio" value="radiobutton">Radio 2<br>
<input id="myCheckBox" type="checkbox" value="checkbox" checked>Checkbox</p>
<input type="button" value="Click here" onclick="function1();">
</body>
</html>

Determining the Value of the Selected Radio Button

  
<html>
<head>
<script language = "JavaScript">
     function getRadioValue(radioObject) {
          var value = null
          for (var i=0; i<radioObject.length; i++) {
               if (radioObject[i].checked) {
                    value = radioObject[i].value;
                    break ;
               }
          }
          return value
     }
</script>
</head>
<body>
    <form name="form1">
    <p><input type=radio name="songs" value="A">A</p>
    <p><input type=radio name="songs" value="B">B</p>
    <p><input type=radio name="songs" value="C">C</p>
    <input type=button value="Show Selected" onClick="alert(getRadioValue(this.form.songs))">
    </form>
</body>
</html>

Finding the Selected Button in a Radio Group

  
<HTML>
<HEAD>
<TITLE>Extracting Highlighted Radio Button</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getSelectedButton(buttonGroup){
    for (var i = 0; i < buttonGroup.length; i++) {
        if (buttonGroup[i].checked) {
            return i;
        }
    }
    return 0;
}
function fullName(form) {
    var i = getSelectedButton(form.songs);
    alert("You chose " + form.songs[i].value + ".");
}
function cycle(form) {
    var i = getSelectedButton(form.songs)
    if (i+1 == form.songs.length) {
        form.songs[0].checked = true
    } else {
        form.songs[i+1].checked = true
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select your favorite song:</B>
<P><INPUT TYPE="radio" NAME="songs" VALUE="A" CHECKED>A
<INPUT TYPE="radio" NAME="songs" VALUE="B" >B
<INPUT TYPE="radio" NAME="songs" VALUE="C" >C
<INPUT TYPE="radio" NAME="songs" VALUE="D" >D</P>
<P><INPUT TYPE="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName(this.form)"></P>
<P><INPUT TYPE="button" NAME="Cycler" VALUE="Cycle Buttons" onClick="cycle(this.form)"> </P>
</FORM>
</BODY>
</HTML>

Get the radio button selection

  

<html>
<head>
<title>Radio</title>
<script language="javascript">
<!--
function RadioCheck() {
var fruit = new Array("Apples", "Oranges", "Bananas", "Kiwis", "Saskatoons", "Grapes");
var selection = document.quiz.colour;
for (i=0; i<selection.length; i++)
  if (selection[i].checked == true)
  alert(fruit[i] + " are " + selection[i].value + ".")
}
//-->
</script>

</head>
<body>
<form name="quiz">
  <input type="radio" name="colour" value="red">red<br>
  <input type="radio" name="colour" value="orange">orange<br>
  <input type="radio" name="colour" value="yellow">yellow<br>
  <input type="radio" name="colour" value="green">green<br>
  <input type="radio" name="colour" value="blue">blue<br>
  <input type="radio" name="colour" value="purple">purple<br>
<br>

<input type="submit" value="Check Answer" onClick="RadioCheck()">
</form>
</body>
</html>

Get the select radio button and its value

   

<html>
<head>
<script>
function processSize(){
  var size;
  var i;
  var selectedOne;
  for (i = 0; i <= 3; i++){
    selectedOne = document.myForm.radSize[i];
    if (selectedOne.checked == true){
      size = selectedOne.value;
    }
  }
  document.myForm.txtOutput.value = size;
}
</script>
</head>
<body>
<form name = myForm>
<input type = "radio" name = radSize value = "small">Small
<input type = "radio" name = radSize value = "medium">Medium
<input type = "radio" name = radSize value = "large">Large
<input type = "button" value = "OK" onClick = "processSize()">
<textarea name = "txtOutput" rows = 5 cols = 40>
</textarea>
</form>
</body>
</html>

Methods and Properties of the Radio Object

  
Method
blur()            Removes focus from the Radio object.
click()           Simulates a mouse click on the button.
focus()           Sets the focus to a button.
handleEvent()     Invokes the default handler for the specified event. 

Property
checked          Specifies whether a button is checked or unchecked.
defaultChecked    Refers to the checked attribute of the HTML "input" tag.
form             Refers to the Form object that contains the Radio object.
name             Refers to the name attribute of the HTML "input" tag.
type             Refers to the type attribute of the HTML "input" tag.
value            Refers to the value attribute of the HTML "input" tag.

Radio action

  
<html>
<head>
  <title>GUI Example</title>
  <script type="text/javascript">
  <!--
    function fsearch(aForm){
      alert ("search");
    }
    function foptions(aForm){
      alert ("option");
    }
    //-->
  </script>
</head>
<body>
  <h3>
    My search form
  </h3>
  <hr>  <form>
    Find:
    <input type="text" name="tfield" size="40">
    <br>
    <input type="radio" name="search">
    Simple Search
    <br>
    <input type="radio" name="search">
    Extended Search
    <br>
    <input type="button" name="bsearch" value="Search" onclick="fsearch(this.form)">
    <input type="button" name="boptions" value="More options" onclick="foptions(this.form)">
  </form>
</body>
</html>

Radio buttons in a form

  
<html>
<head>
<script type="text/javascript">
    function check(browser){
        document.forms[0].answer.value=browser
    }
</script>
</head>
<body>
<form>Select which browser is your favorite:<br>
<input type="radio" name="browser" onclick="check(this.value)" 
            value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)" 
            value="Netscape">Netscape<br>
<input type="radio" name="browser" onclick="check(this.value)" 
            value="Opera">Opera<br>
<br>
<input type="text" name="answer" size="20">
</form>
</body>
</html>

Radio Button status Example

  
    
<html>
<head>
<script language="JavaScript">
    function function2() {
        var m = document.all.myRadioButton.status; 
        alert(m);
    }
    function function3() {
        var m = document.all.myCheckBox.status; 
        alert(m);
    }
</script>
</head>
<body>
<input type="radio" id="myRadioButton" checked>Radio
<input type="button" value="Check Status" onclick="function2();">
<input type="checkbox" id="myCheckBox">Checkbox
<input type="button" value="Check Status" onclick="function3();">
</body>
</html>

Scripting a Group of Radio Objects

  
<HTML>
<HEAD>
<TITLE>Extracting Highlighted Radio Button</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function fullName() {
    var form = document.forms[0]
    for (var i = 0; i < form.songs.length; i++) {
        if (form.songs[i].checked) {
            break;
        }
    }
    alert("You chose " + form.songs[i].value + ".")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select your favorite song:</B>
<INPUT TYPE="radio" NAME="songs" VALUE="A" CHECKED>A
<INPUT TYPE="radio" NAME="songs" VALUE="B" >B
<INPUT TYPE="radio" NAME="songs" VALUE="C" >C<BR>
<INPUT TYPE="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName()">
</FORM>
</BODY>
</HTML>

Using the onPropertyChange Property

  

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>onPropertyChange Event Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function normalText() {
    myP.innerText = "This is a sample paragraph."
}
function shortText() {
    myP.innerText = "Short stuff."
}
function normalColor() {
    myP.style.color = "black"
}
function hotColor() {
    myP.style.color = "red"
}
function showChange() {
    var objID = event.srcElement.id
    var propName = event.propertyName
    var newValue = eval(objID + "." + propName)
    status = "The " + propName + " property of the " + objID
    status += " object has changed to \"" + newValue + "\"."
}
</SCRIPT>
</HEAD>
<BODY>
<H1>onPropertyChange Event Handler</H1>
<HR>
<P ID="myP" onPropertyChange = "showChange()">This is a sample paragraph.</P>
<FORM>
Text: <INPUT TYPE="radio" NAME="btn1" CHECKED onClick="normalText()">Normal
      <INPUT TYPE="radio" NAME="btn1" onClick="shortText()">Short
<BR>
Color: <INPUT TYPE="radio" NAME="btn2" CHECKED onClick="normalColor()">Black
       <INPUT TYPE="radio" NAME="btn2" onClick="hotColor()">Red
</FORM>
</BODY>
</HTML>

JavaScript DHTML/Form Control/RadioButton Radio

Содержание

An onClick event Handler for Radio Buttons

Check a Radio Button

Cycle the selected radio buttons

"defaultChecked" Example

Determining the Value of the Selected Radio Button

Finding the Selected Button in a Radio Group

Get the radio button selection

Get the select radio button and its value

Methods and Properties of the Radio Object

Radio action

Radio buttons in a form

Radio Button status Example

Scripting a Group of Radio Objects

Using the onPropertyChange Property

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты