JavaScript DHTML/Form Control/RadioButton Radio

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

An onClick event Handler for Radio Buttons

   <source lang="html4strict">

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

Select your favorite song:

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

Check a Radio Button

   <source lang="html4strict">

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



 </source>


Cycle the selected radio buttons

   <source lang="html4strict">

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


"defaultChecked" Example

   <source lang="html4strict">

<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
<input id="myRadioButton2" type="radio" value="radiobutton">Radio 2

<input id="myCheckBox" type="checkbox" value="checkbox" checked>Checkbox

<input type="button" value="Click here" onclick="function1();"> </body> </html> 



 </source>


Determining the Value of the Selected Radio Button

   <source lang="html4strict">

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

<input type=radio name="songs" value="A">A

<input type=radio name="songs" value="B">B

<input type=radio name="songs" value="C">C

   <input type=button value="Show Selected" onClick="alert(getRadioValue(this.form.songs))">
   </form>

</body> </html> 



 </source>


Finding the Selected Button in a Radio Group

   <source lang="html4strict">

<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> Select your favorite song:

<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

<INPUT TYPE="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName(this.form)">

<INPUT TYPE="button" NAME="Cycler" VALUE="Cycle Buttons" onClick="cycle(this.form)">

</FORM> </BODY> </HTML> 


 </source>


Get the radio button selection

   <source lang="html4strict">

<html> <head> <title>Radio</title> <script language="javascript">

</script>

</head> <body> <form name="quiz"> 

 <input type="radio" name="colour" value="red">red

 <input type="radio" name="colour" value="orange">orange

 <input type="radio" name="colour" value="yellow">yellow

 <input type="radio" name="colour" value="green">green

 <input type="radio" name="colour" value="blue">blue

 <input type="radio" name="colour" value="purple">purple


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



 </source>


Get the select radio button and its value

   <source lang="html4strict">

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


 </source>


Methods and Properties of the Radio Object

   <source lang="html4strict">

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. 


 </source>


Radio action

   <source lang="html4strict">

<html> <head> 

 <title>GUI Example</title>
 <script type="text/javascript">
 
 </script>

</head> <body>

My search form

<form> 
   Find:
   <input type="text" name="tfield" size="40">
   

   <input type="radio" name="search">
   Simple Search
   

   <input type="radio" name="search">
   Extended Search
   

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



 </source>


Radio buttons in a form

   <source lang="html4strict">

<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:
<input type="radio" name="browser" onclick="check(this.value)" 

           value="Internet Explorer">Internet Explorer

<input type="radio" name="browser" onclick="check(this.value)" 

           value="Netscape">Netscape

<input type="radio" name="browser" onclick="check(this.value)" 

           value="Opera">Opera


<input type="text" name="answer" size="20"> </form> </body> </html> 



 </source>


Radio Button status Example

   <source lang="html4strict">

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



 </source>


Scripting a Group of Radio Objects

   <source lang="html4strict">

<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> Select your favorite song: <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="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName()"> </FORM> </BODY> </HTML> 



 </source>


Using the onPropertyChange Property

   <source lang="html4strict">

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

onPropertyChange Event Handler

This is a sample paragraph.

<FORM> Text: <INPUT TYPE="radio" NAME="btn1" CHECKED onClick="normalText()">Normal 

     <INPUT TYPE="radio" NAME="btn1" onClick="shortText()">Short


Color: <INPUT TYPE="radio" NAME="btn2" CHECKED onClick="normalColor()">Black 

      <INPUT TYPE="radio" NAME="btn2" onClick="hotColor()">Red

</FORM> </BODY> </HTML> 


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