HTML5 不使用 true
或 false
表示布尔属性。布尔属性可以通过只指定属性名称来表示为 true
,而省略该属性则表示为 false
。
(对于 XHTML5,您需要将属性名称作为值提供,以符合 XML 的属性规则):
因此,对于未选中的复选框,请将其更改为:
<input type="checkbox" id="dateCheckbox" checked=false >
对于 HTML5 和 XHTML5:
<input type="checkbox" id="dateCheckbox">
<input type="checkbox" id="dateCheckbox" checked=true >
转换为 HTML5:
<input type="checkbox" id="dateCheckbox" checked>
<input type="checkbox" id="dateCheckbox" checked="checked" />
将 checked
属性设置为 false 是行不通的。
如果 input
元素上存在 checked
属性,则无论您给它什么布尔值,input
元素始终处于选中状态。要取消 input
元素的选中状态,您必须删除 checked
属性。
通过 JavaScript 取消复选框输入元素的选中状态,可以使用 removeAttribute()
方法删除 checked
属性。
以下代码片段在 2 秒后通过 JavaScript 取消选中复选框。
const checkInput = document.querySelector('#dateCheckbox');
setTimeout(() => {
checkInput.removeAttribute('checked');
}, 2000);
<input type="checkbox" id="dateCheckbox" checked>
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>
<input type="checkbox" id="dateCheckbox" checked>
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>
<br />
<input type="checkbox" id="dateCheckbox">
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>
实际上,checked
中是否有任何内容并不重要,只要它存在即可。
例如:
<input type="checkbox" id="dateCheckbox" checked>
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>
但是,省略 checked
的效果与预期相同。
<input type="checkbox" id="dateCheckbox">
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>
请查看 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/checkbox
不幸的是,checked
不是布尔值(true 或 false)。如果在 <input type="checkbox">
标签中存在 checked
属性,则无论您设置什么值,它都将被选中。如果省略它,则会按照预期工作,因为没有 checked
属性。