HTML DOM Input Checkbox type Property

HTMLWeb DevelopmentFront End Technology

The Input Checkbox type property returns/sets type of Input Checkbox.

Syntax

Following is the syntax −

  • Returning string value
inputCheckboxObject.type
  • Setting type to string value
inputCheckboxObject.type = stringValue

String Values

Here, “stringValue” can be the following -

stringValueDetails
checkboxIt defines that input type is checkbox
radioIt defines that input type is radio
textIt defines that input type is text

Example

Let us see an example of Input Checkbox type property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Type Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Other: <input id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change type of input</button>
<div id="displayDiv"></div>
<script>
   var typeOfInput = document.getElementById("formCheckbox");
   var displayDiv = document.getElementById("displayDiv");
   displayDiv.textContent = 'Type of Input: ' + typeOfInput.type function changeType(){
      if(typeOfInput.type == 'checkbox'){
         typeOfInput.type = 'text' displayDiv.textContent = 'Type of Input: ' + typeOfInput.type
      }
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Change type of input’ button −

After clicking ‘Change type of input’ button −

raja
Published on 19-Jul-2019 11:55:39
Advertisements