Reputation: 3381
When using :checked
selector in JavaScript, document.querySelectorAll()
, I see there is an inconsistent behavior. When the :checked
selector 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. Why is it so?
Here are the examples:-
Checkbox: http://jsbin.com/fehonoho/1/edit?html,js,console
Select: http://jsbin.com/yasotuli/1/edit?html,js,console
Upvotes: 2
Views: 279
Reputation: 272006
You misunderstood the issue. The two selectors work as follows:
input[name="gender"]:checked
is a simple selector. It selects an input
element with attribute name=gender
and is :checked
.
[name="aname"] :checked
are two simple selectors separated by the descendant combinator. It selects all :checked
elements that are children / grand children of an element with the attribute [name=aname]
.
Note that option
elements should be tested using :selected
.
Upvotes: 1
Reputation: 723428
From the Selectors spec:
For example, the
:checked
pseudo-class initially applies to such elements that have the HTML4selected
andchecked
attributes as described in Section 17.2.1 of HTML4, but of course the user can toggle "off" such elements in which case the:checked
pseudo-class would no longer apply.
The space preceding the :checked
selector is nothing more than a descendant combinator, so the selector that you have is looking for descendants of a select that are :checked
, rather than the select itself. These descendants are its option elements.
The selected
attribute is found in option elements, not their parent select. In other words, a select can never match the :checked
selector; only its options can. That's why you need a descendant (or child) combinator for it to work, unlike with checkboxes and radio buttons.
To make this clearer, it's highly recommended that you qualify the :checked
selector with a type selector (a universal selector is implied otherwise):
document.querySelectorAll('[name="aname"] option:checked')
Likewise with the attribute selector for the select element:
document.querySelectorAll('select[name="aname"] option:checked')
Upvotes: 4
Reputation: 943142
Because the :checked
element is the <option>
not the <select>
so you need either option:checked
or select :checked
where the latter has a descendant combinator.
Upvotes: 1