Javascript Reference - HTML DOM Input Checkbox checked Property

The checked property sets or gets the checked state of a checkbox.

Browser Support


`checked`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the checked property.

var v = checkboxObject.checked

Set the checked property.

checkboxObject.checked=true|false

Property Values

Value	Description
true\|false	Check or uncheck a checkbox. true - The checkbox is checked false - Default. The checkbox is not checked

Return Value

A Boolean type value, true if the checkbox is checked, and false if the checkbox is not checked.

Example

The following code shows how to get if a checkbox is checked or not.


<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="myFunction()">test</button>
<!--from w  w w .  j av  a  2 s .  c o  m-->
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myCheck").checked;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use a checkbox to convert text in an input field to uppercase.


<!DOCTYPE html>
<html>
<body>
<form>
First Name: <input type="text" id="fname" value="abc">
<br>
Convert to upper case<!--from  w w w. j a v a2  s.  c  o  m-->
<input type="checkbox" onclick="if(this.checked){myFunction()}">
</form>

<script>
function myFunction() {
    document.getElementById("fname").value = document.getElementById("fname").value.toUpperCase();
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to check and uncheck a checkbox.


<!DOCTYPE html>
<html>
<body>
<!--from   ww w  . j  av a 2 s .co  m-->
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script>
function check() {
    document.getElementById("myCheck").checked = true;
}
function uncheck() {
    document.getElementById("myCheck").checked = false;
}
</script>

</body>
</html>

The code above is rendered as follows: