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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。