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

【问题标题】：$('.input:checked') behaves differently than $('.input[checked=checked]')$('.input:checked') 的行为不同于 $('.input[checked=checked]')
【发布时间】：2014-09-09 17:50:34
【问题描述】：

假设以下场景：您有 2 个单选按钮，都具有相同的名称，并且都被选中（我意识到这是无效的）：

<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

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

【问题讨论】：

codepen: codepen.io/joelbyrd/pen/atoKk

标签： javascript jquery jquery-selectors

【解决方案1】：

这是因为:checked 选择器检查元素which is different from the checked attribute 的checked 属性。

【讨论】：

属性：单选按钮的当前状态（只能检查一个）
感谢您的解释和 SO 链接。 This comment specifically 有助于区分元素属性和属性。

【解决方案2】：

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

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

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

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

【讨论】：