CheckboxStateChange event
Occurs when the state of a checkbox has changed.
The current state of a checkbox element can be retrieved with the checked property.
The use of the CheckboxStateChange event is not recommended; use the onchange or onclick event instead.
For a cross-browser solution, the onclick event is a better choice, because the onchange event is fired only when the element loses the focus and the checked state has changed since the last time the element got the focus in Internet Explorer.
See the pages for the onchange and onclick events and the examples below for details.
How to register:
In HTML:
In JavaScript:object.addEventListener ("CheckboxStateChange", handler, useCapture);
This event cannot be registered in HTML.
In JavaScript:
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
Basic information:
| Bubbles | No |
| Cancelable | No |
| Event object | Event |
Actions that invoke the CheckboxStateChange event:
Actions that do not invoke the CheckboxStateChange event:
- Changing the value of the checked property from script.
Example HTML code 1:
This example illustrates the use of the CheckboxStateChange event.
|
|
||||
<head> <script type="text/javascript"> function Init () { var checkbox = document.getElementById ("myCheckbox"); if (checkbox.addEventListener) { checkbox.addEventListener ("CheckboxStateChange", OnChangeCheckbox, false); } } function OnChangeCheckbox (event) { var checkbox = event.target; if (checkbox.checked) { alert ("The check box is checked."); } else { alert ("The check box is not checked."); } } </script> </head> <body onload="Init ()"> Toggle the checked state of the following checked box:<br /><br /> <input type="checkbox" id="myCheckbox" /> <label for="myCheckbox">Sample check box</label> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
A cross-browser solution for the previous example:
|
|
||||
<head> <script type="text/javascript"> function OnChangeCheckbox (checkbox) { if (checkbox.checked) { alert ("The check box is checked."); } else { alert ("The check box is not checked."); } } </script> </head> <body> Toggle the checked state of the following checked box:<br /><br /> <input type="checkbox" onclick="OnChangeCheckbox (this)" id="myCheckbox" /> <label for="myCheckbox">Sample check box</label> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Related pages:
User Contributed Comments