Checkbox : CheckBox « Form « JavaScript Tutorial






  1. JavaScript Tutorial
  2. Form
  3. CheckBox

The Checkbox object represents a graphical check box.

Check boxes are created as part of a form by using the 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.

checkedA Boolean value that determines if the check box is checked.
defaultCheckedA Boolean value that holds the initial state of the check box. This value is set with the CHECKED attribute.
formReturns the Form object of the check box.
nameThe string specified in the NAME attribute of the HTML tag.
typeThe string specified in the TYPE attribute of the HTML tag. This string is always checkbox for the Checkbox object.
valueThe 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.
onBlurThe handler invoked when focus is removed from the check box.
onClickThe handler invoked when the check box is selected.
onFocusThe 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>








10.7.CheckBox
10.7.1.Checkbox
10.7.2.Checkbox.blur()
10.7.3.Checkbox.checked
10.7.4.Checkbox.click()
10.7.5.Checkbox.defaultChecked
10.7.6.Checkbox.focus()
10.7.7.Checkbox.form
10.7.8.Checkbox.handleEvent()
10.7.9.Checkbox.name
10.7.10.Checkbox.onBlur
10.7.11.Checkbox.onClick
10.7.12.Checkbox.onFocus
10.7.13.Checkbox.type
10.7.14.Checkbox.value
10.7.15.Check if a CheckBox checked
10.7.16.With with RADIO and CheckBox
10.7.17.Use checkbox to control the window style
10.7.18.A Checkbox and an onclick Event Handler
10.7.19.A Checkbox, an onclick Event Handler and show/hide form controls