HTML DOM 輸入複選框物件

HTML DOM 輸入複選框物件表示一個型別為複選框的輸入 HTML 元素。

語法

以下是語法：

建立一個型別為複選框的<input>

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

屬性

這裡，“checkboxObject”可以具有以下屬性：

屬性	描述
autofocus	定義複選框是否應在頁面初始載入時獲得焦點。
checked	定義複選框的狀態，即選中/未選中。
defaultChecked	返回 checked 屬性的預設值，即 true/false。
defaultValue	設定/返回複選框的預設值。
disabled	定義複選框是否停用/啟用。
form	返回包含複選框的封閉表單的引用。
indeterminate	設定/返回複選框的不確定狀態。
name	定義複選框的 name 屬性的值。
required	定義為了提交表單，是否必須選中複選框。
type	返回複選框的表單元素型別。
value	定義複選框的 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>