HTML - DOM checked Property

Quiz

The HTML DOM checked property is used to set (update) or get (retrieve) the checked status of a checkbox field. It returns a boolean value: "true" if the checkbox is checked, and "false" otherwise.

In HTML, "checkbox" is an input field type that belongs to HTML forms, specified with type = "checkbox". It allows users to select multiple preferences when filling out a form.

Syntax

Following is the syntax of the HTML DOM checked (to get the checked property) property −

checkboxObject.checked

To update (set) the checked property, use the following syntax −

checkboxObject.checked = true|false

Parameters

Since it is a property, it does not accept any parameters.

Return value

This property returns a boolean value (either true or false) representing whether the checkbox is checked.

Example 1

If the checkbox field is checked, it returns "true".

The following is the basic example of the HTML DOM checked property −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox" checked>
<p>Click the below button to check the checkbox field checked status.</p>
<button id="check_btn">Check Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox").checked;
      document.getElementById("result").innerHTML = "The checkbox field checked status: " + status; 
   });
</script>
</body>
</html>

Example 2

If the checkbox field is unchecked, it returns "false".

Following is another example of the HTML DOM checked property. We use this property to check whether the checkbox field is checked or not −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox">
<p>Click the below button to check the checkbox field checked status.</p>
<button id="check_btn">Check Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox").checked;
      document.getElementById("result").innerHTML = "The checkbox field checked status: " + status; 
   });
</script>
</body>
</html>

Example 3: Updating the checkbox field status

In the example below, we use the checked property to update the current checked status of the checkbox field from "true" to "false" −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
</head>
<body>
<label for="">Checkbox Field:</label>
<input type="checkbox" id="my_checkbox">
<p>Click the below button to update the checkbox field.</p>
<button id="check_btn">Update Status</button>
<p id="result"></p>
<script>
   document.getElementById("check_btn").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox");
      status.checked = true;
      document.getElementById("result").innerHTML = "Status updated to true";
   });
</script>
</body>
</html>

Example 4: Toggle between Light and Dark Mode

The following example shows how to use the checked property to switch between light and dark modes by checking and unchecking the checkbox field −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked</title>
<style>
   div{
      width: 200px;
      height: 200px;
      border: 1px solid green;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      justify-content: center;
      align-items: center;
      display: flex;
      font-family: sans-serif;
      font-weight: bold;
      margin: 5px 0px;
      transition: background-color 0.5s, color 0.5s;
   }
</style>
</head>
<body>
<p>Checked and unchecked the checkbox to switch between dark and light mode.</p>
<input type="checkbox" id="my_checkbox"><span id="msg">Switch to Dark</span>
<div id="demo">Welcome to Tutorialspoint</div>
<script>
   document.getElementById("my_checkbox").addEventListener("click", ()=>{
      let status = document.getElementById("my_checkbox");
      let my_box = document.getElementById('demo');
      if(status.checked == true){
         my_box.style.backgroundColor = "black";
         my_box.style.color = "white";
         document.getElementById('msg').innerHTML = "Switch to Light";
      }
      else{
         my_box.style.backgroundColor = "white";
         my_box.style.color = "black";
         document.getElementById('msg').innerHTML = "Switch to Dark";
      }
   });
</script>
</body>
</html>

Supported Browsers

Property
value	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page