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

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

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

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>


Checkbox

The Checkbox object represents a graphical check box.

Check boxes are created as part of a form by using the <input> tag with the TYPE attribute set to checkbox in an HTML document.

Once created, check boxes can be accessed in JavaScript as an element of a form using dot notation.

Check boxes can also be grouped together under the same name and accessed as an array by using brackets.

Arguments, Properties, Methods, and Event Handlers Associated with the Checkbox Object are listed in the following table.

checked A Boolean value that determines if the check box is checked. defaultChecked 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 The string specified in the NAME attribute of the HTML <input> tag. type The string specified in the TYPE attribute of the HTML <input> tag. This string is always checkbox for the Checkbox object. value The value returned when the form is submitted. 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. onBlur The handler invoked when focus is removed from the check box. onClick The handler invoked when the check box is selected. onFocus The handler invoked when focus is applied to the check box. 



<html>
    <script language="JavaScript">
    <!--
    function submitOrder()
    {
      var alertString = String("Order: ");
      if(document.orderForm.lettuceCB.checked == true)
        alertString += " with lettuce ";      
      if(document.orderForm.cheeseCB.checked == true)
        alertString += "with cheese ";        
      if(document.orderForm.tomatoeCB.checked == true)
        alertString += "with tomatoe ";       
      alert(alertString);
    }
    -->
    </script>
    <form name="orderForm">
      Lettuce
      <input type="checkbox" value="lettuce" name="lettuceCB"><br>
      Cheese 
      <input type="checkbox" value="cheese" name="cheeseCB"><br>
      Tomatoe
      <input type="checkbox" value="tomatoe"name="tomatoeCB"><hr>
      Step 2:
      <input type="button" value="Submit Order" name="orderButton" onClick="submitOrder()">
    </form>
    </html>


Checkbox.blur()

Syntax



document.form.checkbox.blur()


Checkbox.checked

Syntax



document.form.checkbox.checked


Checkbox.click()

Syntax



document.form.checkbox.click()


Checkbox.defaultChecked

Syntax



document.form.checkbox.defaultChecked


Checkbox.focus()

Syntax



document.form.checkbox.focus()


Checkbox.form

Syntax



document.form.checkbox.form


Checkbox.handleEvent()

Syntax



document.form.checkbox.handleEvent(event)


The handleEvent() method provides a way to invoke a check box"s event handler, even though the event never happened.

Argument Associated with the handleEvent() Method

event An Event object to be handled

Checkbox.name

Syntax



document.form.checkbox.name


Checkbox.onBlur

Syntax



onBlur="command"


Checkbox.onClick

Syntax



onClick="command"


Checkbox.onFocus

Syntax



onFocus="command"


Checkbox.type

Syntax



document.form.checkbox.type


Checkbox.value

Syntax



document.form.checkbox.value


Check if a CheckBox checked

<html>
<head>
<title>Online Survey</title>
<script type="text/javascript" language="javascript">
<!-- //
function CheckCheckboxes(){
    var elLength = document.MyForm.elements.length;
    for (i=0; i<elLength; i++)
    {
        var type = MyForm.elements[i].type;
        if (type=="checkbox" && MyForm.elements[i].checked){
            alert("Form element in position " + i + " is of type checkbox and is checked.");
        }
        else if (type=="checkbox") {
            alert("Form element in position " + i + " is of type checkbox and is not checked.");
        }
        else {
        }
    }
}
// -->
</script>
</head>
<body>
<form action="http://www.wbex.ru" method="POST" name="MyForm">
<table width="600">
<tr><th colspan="3" align="center">Online Survey<br /><br /></th>
</tr>
<tr>
 <td>Your Name:</td>
 <td>&nbsp;</td>
 <td><input type="text" name="YourName"/></td></tr>
<tr>
 <td>Your Gender:</td>
 <td>&nbsp;</td>
 <td>
   <input type="radio" name="Gender" value="Male"/>Male<br />
   <input type="radio" name="Gender" value="Female"/>Female<br />
 </td>
</tr>
<tr><td>Which of our consultancy <br />services are you interested in?</td>
 <td align="right">&nbsp;
 </td>
 <td>
   <input type="checkbox" name="XML"/>&nbsp;XML<br />
   <input type="checkbox" name="XSLT"/>&nbsp;XSLT<br />
   <input type="checkbox" name="SVG"/>&nbsp;SVG<br />
   <input type="checkbox" name="XSL-FO"/>&nbsp;XSL-FO<br />
   <input type="checkbox" name="XForms"/>&nbsp;XForms<br />
 </td>
</tr>
<tr>
 <td>Which free gift would you prefer for filling out this survey?</td>
 <td>&nbsp;</td>
 <td>
  <select name="FreeGift">
   <option value="Choice1">Choice 1</option>
   <option value="Choice2">Choice 2</option>
   <option value="Choice3">Choice 3</option>
  </select>
</tr>
<tr>
 <td>Enter your comments in<br />the text box
 </td>
 <td>&nbsp;</td>
 <td><textarea name="Comments" rows="5" cols="50"></textarea></td>
</tr>
<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td>
</tr>
</table>
</form>
</body>
</html>


Use checkbox to control the window style

<html>
<head>
<title>Open Window</title>
<script language="JavaScript" type =" text/javascript">
<!--
function ChangeLink(currentform)
{
    var window_feature = "";
    alert(window_feature);
    for (var cb=0; cb<currentform.length - 1; cb++) {
        if (currentform[cb].checked)
        {
             currentform[cb].value = 1;
        } else {
             currentform[cb].value = 0;
        }
        window_feature = (window_feature + "," + currentform[cb].name + "= [ic:ccc]"+ currentform[cb].value);
    }
    window.open("http://www.wbex.ru", "_blank", window_feature);
}
//-->
</script>
</head>
<body>
<form name="form1">
  <input type="checkbox" name="directories" value="0">Directories Option</p>
  <P><input type="checkbox" name="location" value="0">Location Option</p>
  <P><input type="checkbox" name="menubar" value="0">Menu Bar</p>
  <P><input type="checkbox" name="resized" value="0">Allow Window to be Resized</p>
  <P><input type="checkbox" name="scrollbars" value="0">Scrollbars</p>
  <P><input type="checkbox" name="status" value="0">Status Bar</p>
  <P><input type="checkbox" name="toolbar" value="0">Toolbar</p>
  <P><input type="button" value="Create Window" name="CreateWin" onClick="ChangeLink(this.form)"></p>
</form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/CheckBox&oldid=9111»