即使checked=false，复选框也会被选中

Question

我想用 Javascript 取消选中我的复选框，但它不起作用。然后我尝试直接在HTML中将checked属性设置为false，但即使这样也不起作用：（我也尝试过checked =“false”...）

我的HTML：

<input type="checkbox" id="dateCheckbox" checked=false >
<label for="dateCheckbox"> Keinen Zeitraum angeben</label>

结果：

为什么还检查呢？

Answer 1

HTML5 不使用trueorfalse作为布尔属性。布尔属性是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>

或者这个（XHTML5）：

<input type="checkbox" id="dateCheckbox" checked="checked" />

Answer 2

将属性设置checked为 false 将不起作用。

如果元素checked上存在属性input，则无论您赋予它什么布尔值，都input将始终检查元素。要使该input元素取消选中，您必须删除该checked属性。

要通过 javascript 取消选中复选框输入元素，您可以checked使用removeAttribute()方法删除该属性。

以下代码片段在 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>