JavaScript DHTML/Form Control/CheckBox — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

1 A Checkbox and an onclick Event Handler
2 A Checkbox, an onclick Event Handler and show/hide form controls
3 Call "click()" to triger event
4 Check a CheckBox
5 Check and uncheck a checkbox
6 Checkbox Action
7 CheckBox check action
8 Checkboxes in a form
9 Checkbox in a form
10 Check status Example
11 Determining Whether a Checkbox Object Is Checked
12 Get value from check box
13 "indeterminate" Example
14 Is checked
15 Methods and Properties of the Checkbox Object
16 The Checkbox Object"s checked Property
17 The checked Property as a Conditional
18 Using the HTML Form Elements Array

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>

JavaScript DHTML/Form Control/CheckBox — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

A Checkbox and an onclick Event Handler

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

Call "click()" to triger event

Check a CheckBox

Check and uncheck a checkbox

Checkbox Action

CheckBox check action

Checkboxes in a form

Checkbox in a form

Check status Example

Determining Whether a Checkbox Object Is Checked

Get value from check box

"indeterminate" Example

Is checked

Methods and Properties of the Checkbox Object

The Checkbox Object"s checked Property

The checked Property as a Conditional

Using the HTML Form Elements Array

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)