如何仅对具有特定属性集的元素使用querySelectorAll？

124

我正在尝试使用document.querySelectorAll所有具有value属性集的复选框。

页面上还有其他未value设置的复选框，并且每个复选框的值都不同。ID和名称不是唯一的。

例： <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

如何仅选择已设置值的复选框？

javascript css-selectors selectors-api

— 索林
source

这包括空格吗？像values=""

— 约瑟夫·

其他复选框根本没有任何价值，因此不必包含它。

— 2012年

Answers:

216

您可以这样使用querySelectorAll()：

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

转换为：

获取所有具有属性“值”且属性“值”不为空的输入。

在此演示中，它禁用具有非空白值的复选框。

— 约瑟夫
source

但是，如何仅选择复选框类型的输入呢？还有许多其他具有值属性的输入标签，但是我只需要复选框。

— 2012年

@Soryn添加[type="checkbox"]。更新了我的答案。

— 约瑟夫

伟大的答案！这很大程度上消除了将jQuery包含在小型库中以进行DOM遍历的需求。我在下面的答案中有一些额外的提示。

— mattdlockyer 2014年

您能告诉我这是什么语法输入法[value] [type =“ checkbox”]：not（[value =“”]我以前没有在javascript中看到这样的语法

— blackHawk

@blackHawk语法使用CSS选择器。如MDN所指定，“它是一个包含一个或多个CSS选择器（以逗号分隔）的字符串”。您可以在此处阅读有关CSS选择器的信息。

— martieva

额外提示：

多个“ nots”，未隐藏且未禁用的输入：

:not([type="hidden"]):not([disabled])

您还知道您可以执行以下操作：

node.parentNode.querySelectorAll('div');

这相当于jQuery的：

$(node).parent().find('div');

它将有效地递归找到HOT DAMN中“节点”及以下的所有div！

— 马特洛克耶
source

以您的示例为例：

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

在示例中，将$$替换为document.querySelectorAll：

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

将示例直接用于：

const $$ = document.querySelectorAll.bind(document);

一些补充：

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()

— 庞纳鲁德
source