我今天在工作上花了这段时间，我觉得自己是个白痴。
tl：dr; 您要寻找的是：
// <input type="checkbox" id="your-checkbox-id" />
const yourCheckbox = document.getElementById('your-checkbox-id');
// check the checkbox
yourCheckbox.checked = true;
// uncheck the checkbox
yourCheckbox.checked = false;
那么我今天做错了什么？让我们看一下下面的代码蛋白。
使用setAttribute方法
我有一个复选框列表，顶部有一个“选择所有”复选框。当检查“选择所有”复选框时，我想检查所有基础复选框。
我尝试在输入元素上设置checked属性。我的代码看起来像这样：
const selectAllCheckbox = document.getElementById('select-all');
const childCheckboxes = document.querySelectorAll('.child-checkbox');
const toggleSelectAllCheckbox = () => {
const areAllChecked = [...childCheckboxes].every(c => c.hasAttribute('checked'));
if (areAllChecked) {
// uncheck all if every checkbox is checked
childCheckboxes.forEach(c => {
c.removeAttribute('checked');
})
}
else {
// otherwise, check all
childCheckboxes.forEach(c => {
c.setAttribute('checked', '');
})
}
}
selectAllCheckbox.addEventListener('click', toggleSelectAllCheckbox);
乍一看似乎还不错。如果切换“选择所有”复选框，则可以工作。
但是，如果您切换任何一个子弹复选框，则 切换“选择全部”，它会忽略您刚刚切换的孩子。在上面的Codepen示例中尝试一下。这不会。
设置“检查”属性
最终，我发现使用setAttribute()和removeAttribute()方法是我出错的地方。相反，我需要直接访问并设置checked属性，例如：
const selectAllCheckbox = document.getElementById('select-all');
const childCheckboxes = document.querySelectorAll('.child-checkbox');
const toggleSelectAllCheckbox = () => {
const areAllChecked = [...childCheckboxes].every(c => c.checked === true)
childCheckboxes.forEach(c => {
c.checked = !areAllChecked;
})
}
selectAllCheckbox.addEventListener('click', toggleSelectAllCheckbox);
有一些额外的工作可以确保在切换孩子时确保“选择所有”复选框更新，但是您可以检查Codepen。
我为什么错了？
在HTML元素上设置属性时，我一直以为element.setAttribute('attribute', value)与element.attribute = value大致可互换。但是有微妙的差异。
html属性具有两个侧面，内容属性和 IDL attribute.
The content attribute is what is written in HTML. It is also accessed via the methods koude6, koude7, koude8, and koude9.
For example, if I have koude10, koude11 will be false.
If I then set koude12 and use a devtools inspector, my HTML will now be koude13.
IDL属性是JavaScript属性。如果我使用console.log('checkboxElement')将元素登录到控制台，我可以像任何JavaScript对象一样钻入它，并查看所有适当的位置。这些是IDL属性。
IDL属性将使用基础内容属性。 element.setAttribute("attribute", value)和element.attribute = value是可以互换的...大多数时候。
复选框的捕获量是，对于checked IDL属性，基础内容属性是 不是 checked。它没有一个。
使用type="checkbox"输入的内容属性checked相反，对应于defaultChecked IDL属性。即使element.setAttribute("checked") 有点用于编程检查复选框（至少在我尝试过的浏览器中），也不应该这样做。
如果要在页面加载时（或首先绘制元素时）检查复选框，请使用checked内容属性。
如果要使用JavaScript突变复选框，请使用checked IDL属性：element.checked = true。