JavaScript DHTML/Form Control/CheckBox

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

A Checkbox and an onclick Event Handler

  
<html> 
<head> 
<title>Checkbox Event Handler</title> 
<style type="text/css"> 
#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
<span id="myGroup">
  <input type="radio" />15" 
</span>
</form> 
</body> 
</html>



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

  
<html> 
<head> 
<title>Checkbox Event Handler</title> 
<style type="text/css"> 
#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
<span id="myGroup">
  <input type="radio" />15" 
</span>
</form> 
</body> 
</html>



Call "click()" to triger event

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



Check a CheckBox

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



Check and uncheck a checkbox

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



Checkbox Action

 

<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" />
    <br>
    Last name: 
    <input type="text" name="lname" onChange="convertField(this)" size="20" />
    <br>
    Convert fields to upper case 
    <input type="checkBox" name="convertUpper" 
            onClick="if (this.checked) {convertAllFields()}" value="ON">
</form>
</body>
</html>



CheckBox check action

 
<html>
<head>
<script language="JavaScript">
<!--
function checkb1() { 
   alert("You clicked on checkbox 1"); 
}
function checkb2() { 
   alert("You clicked on checkbox 2"); 
}
function checkb3() { 
   alert("You clicked on checkbox 3"); 
}
//-->
</script>
</head>
<body>
<form>
<input type="checkbox" onClick="checkb1()">A<br>
<input type="checkbox" onClick="checkb2()">B<br>
<input type="checkbox" onClick="checkb3()">C
</form>
</body>
</html>



Checkboxes in a form

 
<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?<br><br>
    <input type="checkbox" name="coffee" value="cream">With cream<br>
    <input type="checkbox" name="coffee" value="sugar">With sugar<br>
    <br>
    <input type="button" name="test" onclick="check()" value="Send order">
    <br>
    <br>
    <input type="text" name="answer" size="50">
</form>
</body>
</html>



Checkbox in a form

 
<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?<br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<br>
<input type="button" name="test" onclick="check()" value="Send order">
<br>
<input type="text" name="answer" size="50">
</form>
</body>
</html>



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



Determining Whether a Checkbox Object Is Checked

 
<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">
    <h2>Online Registration</h2>
    <p>Username:<br>
    <input type=text size=25 maxlength=256 name="Username" onFocus="selectText(this)">
    <br>Browser used:<br>
    <input type=text size=25 maxlength=256 name="Browser" onFocus="selectText(this)">
    <br>
    Email address:<strong> <br>
    </strong>
    <input type=text size=25 maxlength=256 name="EmailAddress" onFocus="selectText(this)">
    </p>
    
    <h2>
    <input type=submit value="Register"> 
    <input type=reset value="Clear">
    </h2>
    <p>
    <input type=checkbox name="selectBox">Activate field selection.
    </form>
</body>
</html>



Get value from check box

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



"indeterminate" Example

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



Is checked

 
<html>
<head>
<script language="JavaScript">
<!--
function cb1(f) {
  if (f.checked) {
     alert("Checkbox 1 is checked");
  }
}
function cb2(f) {
  if (f.checked) {
     alert("Checkbox 2 is checked");
  }
}
//-->
</script>
</head>
<body>
<form name="checkForm">
<input type="checkbox" checked name="c1" onClick="cb1(this.form.c1)">Item 1<br>
<input type="checkbox" name="c2" onClick="cb2(this.form.c2)">Item 2
</form>
</body>
</html>



Methods and Properties of the Checkbox Object

 
  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.



The Checkbox Object"s checked Property

 
<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<BR>
<INPUT TYPE="button" VALUE="Inspect Box" onClick="myFunction()">
</FORM>
</BODY>
</HTML>



The checked Property as a Conditional

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



Using the HTML Form Elements Array

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