2

:checked在 JavaScript 中使用选择器时document.querySelectorAll()，我发现存在不一致的行为。When the :checkedselector is used for checkbox or radio button it doesn't require space before the colon (:), but when this used for select options it requires a space before it. 为什么会这样？

以下是示例：-

复选框： http: //jsbin.com/fehonoho/1/edit ?html,js,console

选择： http: //jsbin.com/yasotuli/1/edit ?html,js,console

4

3 回答 3

4

从选择器规范：

例如，:checked伪类最初适用于具有 HTML4selected和HTML4第 17.2.1 节checked中描述的属性的元素，但当然用户可以“关闭”这些元素，在这种情况下伪类将不再申请。:checked

选择器前面的空格:checked只不过是后代组合器，因此您拥有的选择器正在寻找 select 的后代:checked，而不是 select 本身。这些后代是它的选项元素。

该selected属性位于选项元素中，而不是其父选择中。换句话说，一个选择永远不能匹配:checked选择器；只有它的选项可以。这就是为什么您需要一个后代（或子）组合器才能使其工作，这与复选框和单选按钮不同。

为了更清楚地说明这一点，强烈建议您:checked使用类型选择器限定选择器（否则隐含通用选择器）：

document.querySelectorAll('[name="aname"] option:checked')

与 select 元素的属性选择器类似：

document.querySelectorAll('select[name="aname"] option:checked')
于 2014-04-06T10:29:31.187 回答
1

因为:checked元素<option>不是<select>所以你需要或者option:checked后者select :checked有后代组合器的地方。

演示

于 2014-04-06T10:29:23.030 回答
1

你误解了这个问题。这两个选择器的工作方式如下：

input[name="gender"]:checked

是一个简单的选择器。它选择一个具有属性并且是的input元素。name=gender:checked

[name="aname"] :checked

是由后代组合器分隔的两个简单选择器。它选择:checked具有属性的元素的所有子/孙子元素[name=aname]。

请注意，option元素应使用:selected.

于 2014-04-06T10:30:12.743 回答