$('.input:checked')的行为不同于$('.input[checked=checked]')

Question

以下面的场景为例:您有两个单选按钮，都具有相同的名称，并且都选中了(我知道这是无效的)：

<input type="radio" class="input" name="cb1" checked="checked" />
<input type="radio" class="input" name="cb1" checked="checked" />

为什么以下两个选择器的行为不同？

$('.input:checked').size(); // returns 1
$('.input[checked=checked]').size(); // returns 2

显然，第一个选择器只返回标记中最后出现的复选框，而第一个选择器则返回两者。

Answer 1

这是因为:checked选择器检查元素 的checked属性。

Answer 2

由于两个元素具有相同的名称，因此它们作为一个单元运行，在呈现元素时实际上只选择了一个单选按钮。

​

​

.input[checked=checked]不关心结果，它只检查属性。

.input:checked反映了实际的元素状态。

将name更改为不同，这两个查询都将返回2。