已检查 = “已检查” vs 已检查 = true

checked = "checked" vs checked = true

本文关键字:检查 true vs 已检查      更新时间:2023-09-26

以下两种用法有什么区别?

document.getElementById('myRadio').checked = "checked";

document.getElementById('myRadio').checked = true;

对我来说,两者的行为方式相同。但是,我只是好奇为什么有两种方法可以做同样的事情。

哪一个是理想的用法?我需要支持 IE7 及更高版本。

document.getElementById('myRadio').checked是一个布尔值。它应该是truefalse

document.getElementById('myRadio').checked = "checked";将字符串转换为布尔值,这是真的。

document.getElementById('myRadio').checked = true;只是分配true而不进行强制转换。

使用true因为它的效率略高,并且更能向维护者揭示意图。

该元素同时具有一个名为 checked 的属性和属性。该属性确定当前状态。

属性是字符串,属性是布尔值。从 HTML 代码创建元素时,将从标记设置属性,并根据属性的值设置属性。

如果标记中没有属性的值,则该属性将变为null,但该属性始终为 truefalse ,因此它变为 false

设置属性时,应使用布尔值:

document.getElementById('myRadio').checked = true;

如果设置该属性,则使用字符串:

document.getElementById('myRadio').setAttribute('checked', 'checked');
请注意,设置属性也会更改属性

,但设置属性不会更改属性。

另请注意,无论您将属性设置为什么值,该属性都将变为 true 。即使您使用空字符串或null,设置该属性也意味着它已被选中。使用 removeAttribute 取消选中使用该属性的元素:

document.getElementById('myRadio').removeAttribute('checked');

原始checked属性(HTML 4 及更早版本(不需要值 - 如果存在,则"检查"该元素,如果不存在,则不是。

然而,这对于遵循HTML 4的XHTML无效。

该标准建议使用 checked="checked" 作为 true 的条件 - 因此您发布的两种方式最终都会做同样的事情。

使用哪一个并不重要 - 使用对您最有意义的一个并坚持下去(或与您的团队商定要走哪条路(。

document.getElementById('myRadio')返回

DOM 元素,我将在此答案中将其引用为elem

elem.checked访问名为 DOM 元素的 checked 的属性。此属性始终为布尔值。

在编写HTML时,您可以在XHTML中使用checked="checked";在HTML中,您可以简单地使用checked。设置属性时(这是通过 .setAttribute('checked', 'checked') 完成的(,您需要提供一个值,因为某些浏览器认为空值不存在。

但是,由于您有 DOM 元素,因此您没有理由设置该属性,因为您可以简单地使用它 - 更舒适的布尔属性。由于非空字符串在布尔上下文中被视为true,因此将elem.checked设置为 'checked' 或任何其他不是虚假值(即使是 'false''0' (将选中该复选框。没有理由不使用truefalse,所以你应该坚持正确的值。

checked属性是一个布尔值"checked"因此除布尔false以外的其他"string"的值转换为true

任何字符串值都将为 true。属性的存在也使它成为现实:

<input type="checkbox" checked>

你可以让它取消检查,只使用 JS 在 DOM 中进行布尔值更改。

所以答案是:他们是平等的。

W3C