HTML DOM 输入复选框的 required 属性

htmlweb developmentfront end technology更新于 2025/8/2 14:04:17

输入复选框的 required 属性决定了输入复选框是否必须选中。

语法

以下是语法 −

返回布尔值 - true/false

inputCheckboxObject.required

将 required 设置为 booleanValue

inputCheckboxObject.required = booleanValue

布尔值

此处，"booleanValue"可以是以下值 −

booleanValue	详细信息
true	定义必须选中复选框才能提交表单。
false	这是默认值，勾选不是强制性的。

示例

让我们看一个 Input Checkbox required属性的示例 −

<!DOCTYPE html>
<html>
<head>
<title>Required Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Check me ! I am required: <input id="formCheckbox" type="checkbox" name="formCheckbox" required>
</div>
</form>
<button onclick="getRequiredStatus()">Check if form is submittable</button>
<div id="displayDiv"></div>
<script>
   function getRequiredStatus(){
      var requiredBool = document.getElementById("formCheckbox");
      var displayDiv = document.getElementById("displayDiv");
      if(requiredBool.required == false || (requiredBool.required == true && requiredBool.checked == true)){
         displayDiv.textContent = 'Required attribute of checkbox: '+requiredBool.required + ', form is submittable ';
      } else {
         displayDiv.textContent = 'Check the checkbox'+ ', current value of required attribute: '+requiredBool.required ;
      }
   }
</script>
</body>
</html>