Javascript Reference - HTML DOM Input Checkbox Object

The Input Checkbox object represents an HTML <input> element with type="checkbox".

Input Checkbox Object Properties

Property	Description
autofocus	Sets or gets whether a checkbox can automatically get focus when the page loads
checked	Check and uncheck a checkbox
defaultChecked	If a checkbox is checked by default
defaultValue	Sets or gets the default value of a checkbox
disabled	Enable or disable a checkbox
form	Returns a reference to the form that contains the checkbox
indeterminate	Sets or gets the indeterminate state of the checkbox
name	Sets or gets the checkbox's name
required	Sets or gets whether the checkbox must be checked before submitting the form
type	Get checkbox's type
value	Sets or gets the value attribute of a checkbox

Standard Properties and Events

The Input Checkbox object supports the standard properties and events.

Example

We can access an <input> element with type="checkbox" by using getElementById().


<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  w  ww. j av a2 s .  c o  m-->
    var x = document.getElementById("myCheck");
    x.checked = true;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <input> element with type="checkbox" by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<!-- w w  w.jav  a2  s .  c om-->
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "checkbox");
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: