Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Input Checkbox checked Property


The HTML DOM input checkbox checked property returns and alter the value of checked attribute of a checkbox in HTML.

syntax

Following is the syntax −

1. Returning checked

object.checked

2. Altering checked

object.checked = true|false

Example

Let us see an example of HTML DOM Input Checkbox checked property −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked property</title>
<style>
   body{
      text-align:center;
   }
   p{
      font-size:1.5rem;
      color:#ff8741;
   }
   input{
      width:30px;
      height:30px;
   }
   button{
      background-color:#db133a;
      color:#fff;
      padding:8px;
      border:none;
      width:120px;
      margin:0.5rem;
      border-radius:50px;
      outline:none;
   }
</style>
</head>
<body>
<h1>checked Property Example</h1>
<p>Are you happy?</p>
<input type="checkbox">
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
   function yes() {
      document.querySelector("input").checked = true;
   }
   function no() {
      document.querySelector("input").checked = false;
   }
</script>
</body>
</html>

output

This will produce the following output −

HTML DOM Input Checkbox checked Property

Click on “Yes” button to check the box.

HTML DOM Input Checkbox checked Property

Now, click on “No” button to uncheck the box.

HTML DOM Input Checkbox checked Property