JavaScript DHTML/Form Control/CheckBox

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

A Checkbox and an onclick Event Handler

   <source lang="html4strict">

<html> <head> <title>Checkbox Event Handler</title> <style type="text/css">

  1. myGroup {visibility:hidden}

</style> <script type="text/javascript"> function toggle(chkbox, group) { 

   var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
   document.getElementById(group).style.visibility = visSetting;

} function swap(radBtn, group) { 

   var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; 
   document.getElementById("modems").style.display = modemsVisSetting;

} </script> </head> <body> <form> <input type="checkbox" name="monitor" onclick="toggle(this, "myGroup")" />Monitor 

 <input type="radio" />15"

</form> </body> </html> 


 </source>


A Checkbox, an onclick Event Handler and show/hide form controls

   <source lang="html4strict">

<html> <head> <title>Checkbox Event Handler</title> <style type="text/css">

  1. myGroup {visibility:hidden}

</style> <script type="text/javascript"> function toggle(chkbox, group) { 

   var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
   document.getElementById(group).style.visibility = visSetting;

} function swap(radBtn, group) { 

   var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; 
   document.getElementById("modems").style.display = modemsVisSetting;

} </script> </head> <body> <form> <input type="checkbox" name="monitor" onclick="toggle(this, "myGroup")" />Monitor 

 <input type="radio" />15"

</form> </body> </html> 


 </source>


Call "click()" to triger event

   <source lang="html4strict">

<html> <body> <script language="JavaScript"> 

   function function1() {
       myCheckbox.focus(); 
       myCheckbox.click();
   }

</script> <input type="checkbox" id="myCheckbox" value="checkbox"> <button onclick="function1();">Click the checkbox</button> </body> </html> 


 </source>


Check a CheckBox

   <source lang="html4strict">

<html> <head> <title>A sample document</title> </head> <body bgcolor="White"> <form> <input type="checkbox" checked name="cb1">Item 1 </form> </body> </html> 


 </source>


Check and uncheck a checkbox

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function check(){ 

   var x=document.forms.myForm
   x[0].checked=true

} function uncheck(){ 

   var x=document.forms.myForm
   x[0].checked=false

} </script> </head> <body> <form name="myForm"> 

   <input type="checkbox" value="on">
   <input type="button" onclick="check()" value="Check Checkbox">
   <input type="button" onclick="uncheck()" value="Uncheck Checkbox">

</form> </body> </html> 


 </source>


Checkbox Action

   <source lang="html4strict">

<html> <body> <script type="text/javascript"> function convertField(field){ 

   if (document.form1.convertUpper.checked){
     field.value=field.value.toUpperCase()
 }

} function convertAllFields(){ 

   document.form1.fname.value=document.form1.fname.value.toUpperCase()
   document.form1.lname.value=document.form1.lname.value.toUpperCase()

} </script> <form name="form1"> 

   First name: 
   <input type="text" name="fname" onChange="convertField(this)" size="20" />
   

   Last name: 
   <input type="text" name="lname" onChange="convertField(this)" size="20" />
   

   Convert fields to upper case 
   <input type="checkBox" name="convertUpper" 
           onClick="if (this.checked) {convertAllFields()}" value="ON">

</form> </body> </html> 


 </source>


CheckBox check action

   <source lang="html4strict">

<html> <head> <script language="JavaScript">

</script> </head> <body> <form> <input type="checkbox" onClick="checkb1()">A
<input type="checkbox" onClick="checkb2()">B
<input type="checkbox" onClick="checkb3()">C </form> </body> </html> 


 </source>


Checkboxes in a form

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> function check(){ 

   coffee=document.forms[0].coffee
   answer=document.forms[0].answer
   txt=""
   for (i=0;i<coffee.length;++ i){
       if (coffee[i].checked){
           txt=txt + coffee[i].value + " "
       }
   }
   answer.value="You ordered a coffee with " + txt

} </script> </head> <body> <form> 

   How would you like your coffee?


   <input type="checkbox" name="coffee" value="cream">With cream

   <input type="checkbox" name="coffee" value="sugar">With sugar

   

   <input type="button" name="test" onclick="check()" value="Send order">
   

   

   <input type="text" name="answer" size="50">

</form> </body> </html> 


 </source>


Checkbox in a form

   <source lang="html4strict">

<html> <head> <script type="text/javascript"> 

   function check(){
       coffee=document.forms[0].coffee
       answer=document.forms[0].answer
       txt=""
       for (i=0;i<coffee.length;++ i){
           if (coffee[i].checked){
               txt=txt + coffee[i].value + " "
           }
       }
       answer.value="You ordered a coffee with " + txt
   }

</script> </head> <body> <form> How would you like your coffee?
<input type="checkbox" name="coffee" value="cream">With cream
<input type="checkbox" name="coffee" value="sugar">With sugar

<input type="button" name="test" onclick="check()" value="Send order">
<input type="text" name="answer" size="50"> </form> </body> </html> 



 </source>


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


Determining Whether a Checkbox Object Is Checked

   <source lang="html4strict">

<html> <head> <title>Online Registration</title> <SCRIPT LANGUAGE="JavaScript"> 

    function selectText(currentObject) {
         if (document.form1.selectBox.checked) {
              currentObject.select()
         }
    }

</SCRIPT> </head> <body> 

   <form name="form1" method="POST">

Online Registration

Username:
<input type=text size=25 maxlength=256 name="Username" onFocus="selectText(this)">
Browser used:
<input type=text size=25 maxlength=256 name="Browser" onFocus="selectText(this)">
Email address:
<input type=text size=25 maxlength=256 name="EmailAddress" onFocus="selectText(this)">

<input type=submit value="Register"> <input type=reset value="Clear">

<input type=checkbox name="selectBox">Activate field selection. </form> </body> </html> </source>

Get value from check box

   <source lang="html4strict">

<html> <head> <script> function processMusic(){ 

 document.myForm.txtOutput.value = "";
 
 if (document.myForm.chkCountry.checked == true){
   document.myForm.txtOutput.value += "You like ";
   document.myForm.txtOutput.value += document.myForm.chkCountry.value;
   document.myForm.txtOutput.value += "\n";
 }

} </script> </head> <body> Music Chooser <form name = myForm> <input type = "checkbox" name = "chkCountry" value = "country">country <textarea name = "txtOutput" 

         rows = 10
         cols = 35>

</textarea> </form> </body> </html> 


 </source>


"indeterminate" Example

   <source lang="html4strict">

<html> <body> <input type="checkbox" id="myCheckBox" value="checkbox" checked> Indeterminate = true. <input type="button" value="Checkbox state" onClick="function1();"> <script language="JavaScript"> document.all.myCheckBox.indeterminate = true; function function1() { 

  var m = document.all.myCheckBox.indeterminate;
  alert("Indeterminate: "+m);

} </script> </body> </html> 


 </source>


Is checked

   <source lang="html4strict">

<html> <head> <script language="JavaScript">

</script> </head> <body> <form name="checkForm"> <input type="checkbox" checked name="c1" onClick="cb1(this.form.c1)">Item 1
<input type="checkbox" name="c2" onClick="cb2(this.form.c2)">Item 2 </form> </body> </html> 


 </source>


Methods and Properties of the Checkbox Object

   <source lang="html4strict">

 Method

+-----------+----------+----------------------------------------------------+ 

            blur()      Removes focus from the check box.

+-----------+----------+----------------------------------------------------+ 

            click()     Calls the check box"s onClick event handler.

+-----------+----------+----------------------------------------------------+ 

            focus()     Applies focus to this check box.

+-----------+----------+----------------------------------------------------+ 

             handleEvent()  Passes an event to the appropriate event handler 
                        associated with the check box.

+-----------+----------+----------------------------------------------------+ 

 Property

+-----------+----------+----------------------------------------------------+ 

            checked     Returns a Boolean value that determines if the 
                        check box is checked.

+-----------+----------+----------------------------------------------------+ 

            defaultChecked Returns a Boolean value that holds the initial 
                        state of the check box. This value is set with the 
                        checked attribute.

+-----------+----------+----------------------------------------------------+ 

            form        Returns the Form object of the check box.

+-----------+----------+----------------------------------------------------+ 

            name        Returns a string that is specified in the name 
                        attribute of the HTML "input" tag.

+-----------+----------+----------------------------------------------------+ 

            type        Returns a string that is specified in the type 
                        attribute of the HTML "input" tag. This string is 
                        always checkbox for the Checkbox object.

+-----------+----------+----------------------------------------------------+ 

            value       Returns a value returned when the form is submitted.
          
        
 </source>


The Checkbox Object"s checked Property

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Checkbox Inspector</TITLE> <SCRIPT LANGUAGE="JavaScript"> function myFunction() { 

   if (document.forms[0].checkThis.checked) {
       alert("The box is checked.")
   } else {
       alert("The box is not checked at the moment.")
   }

} </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="checkbox" NAME="checkThis">Check here
<INPUT TYPE="button" VALUE="Inspect Box" onClick="myFunction()"> </FORM> </BODY> </HTML> 


 </source>


The checked Property as a Conditional

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Checkbox Inspector</TITLE> <SCRIPT LANGUAGE="JavaScript"> function myFunction(form) { 

   if (form.checkThis.checked) {
       alert("The box is checked.")
   } else {
       alert("The box is not checked at the moment.")
   }

} </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="checkbox" NAME="checkThis">Check here<P> <INPUT TYPE="button" NAME="boxChecker" VALUE="Inspect Box" 

onClick="myFunction(this.form)">

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


 </source>


Using the HTML Form Elements Array

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Elements </TITLE> </HEAD> <BODY> <SCRIPT> 

  function uClicked (theBox){ 
     if (!theBox.checked) 
        alert ("You unchecked the box."); 
     else 
        alert ("You checked the box."); 
  } 
  function clearChecks(form){ 
     for (var i = 0; i < 100; ++i) { 
        form.elements[i].checked = false; 
     } 
  } 
  function checkAll(form){ 
     for (var i = 0; i < 100; ++i) { 
        form.elements[i].checked = true; 
     } 
  } 
  </SCRIPT>
<form>

<INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="checkbox" onClick="uClicked(this)"> <INPUT TYPE="button" VALUE="Check All" onClick="checkAll(this.form)"> <INPUT TYPE="button" VALUE="Clear Checks" onClick="clearChecks(this.form)"> </FORM>

</BODY> </HTML>


</source>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/CheckBox&oldid=2501»