JavaScript DHTML/Form Control/RadioButton Radio

Материал из Web эксперт
Версия от 07:21, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/RadioButton_Radio&oldid=2491»