HTML DOM Input Checkbox用法及代码示例

HTML DOM Input Checkbox 对象表示一个带有复选框类型的输入 HTML 元素。

用法

以下是语法 -

创建一个<input>带类型复选框

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

属性

这里， ”checkboxObject”可以具有以下属性 -

属性	描述
autofocus	它定义复选框是否应该专注于初始页面加载。
checked	它定义了复选框的状态，即选中/未选中。
defaultChecked	它返回检查属性的默认值，即真/假
defaultValue	它设置/返回复选框的默认值
disabled	它定义复选框是否被禁用/启用
form	它返回包含复选框的封闭表单的引用
indeterminate	它设置/返回复选框的不确定状态
name	它定义了一个复选框的 name 属性的值
required	它定义是否必须选中复选框才能提交表单
type	它返回复选框的表单元素的类型
value	它定义了复选框的 value 属性的值

示例

让我们看一个例子Input Checkbox value属性 -

<!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>

输出

这将产生以下输出 -

点击前‘Change value of input checkbox’按钮 -

点击后‘Change value of input checkbox’按钮 -

已检查‘Color-Red’复选框和点击‘Change value of input checkbox’按钮 -

相关用法

注：本文由纯净天空筛选整理自Kumar Varma大神的英文原创作品 HTML DOM Input Checkbox Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。