​x
 
<!DOCTYPE html>
<html>
<head>
<style> 
input:indeterminate {
  box-shadow: 0 0 5px 3px red;
}
</style>
</head>
<body>
​
<h1>:indeterminate 实例</h1>
​
<h2>不确定状态的复选框</h2>
<p>下面的复选框处于不确定状态（通过 JavaScript 设置）。如果你点击它，它将不再是不确定状态。</p>
<p>请注意，不确定状态的复选框显示为“-”图标，而不是勾选或空框。</p>
​
<input type="checkbox" id="myCheckbox"> 复选框
​
<h2>不确定状态的单选按钮</h2>
<p>当表单中具有相同名称的单选按钮都未选中时，单选按钮处于不确定状态。</p>
​
<form>
<input type="radio" id="radio1" name="rB" value="val1" />
<label for="radio1">第一个单选按钮</label><br>
<input type="radio" id="radio2" name="rB" value="val2" />
<label for="radio2">第二个单选按钮</label>
</form>
​
<script>
// 通过 JavaScript 将复选框设置为不确定状态
const checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>
​
</body>
</html>
​