HTML DOM Input Checkbox Object

HTML Web Development Front End Technology

The HTML DOM Input Checkbox Object represents an input HTML element with type checkbox.

Syntax

Following is the syntax −

Creating an <input> with type checkbox

var checkboxObject = document.createElement(“input”);
checkboxObject.type = “checkbox”;

Attributes

Here, “checkboxObject” can have the following attributes −

Attributes	Description
autofocus	It defines if the checkbox should be focused on initial page load.
checked	It defines the state of checkbox i.e. checked/unchecked.
defaultChecked	It returns the default value of checked attribute i.e. true/false
defaultValue	It sets/returns the default value of checkbox
disabled	It defines if checkbox is disabled/enabled
form	It returns a reference of enclosing form that contains the checkbox
indeterminate	It sets/returns indeterminate state of checkbox
name	It defines the value of name attribute of a checkbox
required	It defines if the checkbox is compulsory to be checked in order to submit the form
type	It returns the type of form element of checkbox
value	It defines the value of the value attribute of a checkbox

Example

Let us see an example of Input Checkbox value property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
   var valueOfInput = document.getElementById("formCheckbox");
   var displayDiv = document.getElementById("displayDiv");
   displayDiv.textContent = 'Value: ' + valueOfInput.value;
   function changeType(){
      if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
         valueOfInput.value = 'Red' displayDiv.textContent = 'value: ' + valueOfInput.value;
      } else {
         displayDiv.textContent = 'Check the checkbox to change value to red';
      }
   }
</script>
</body>
</html>