Question

我正在尝试将document.querySelectorAll用于设置了value属性的所有复选框。

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

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

如何只选择那些设置了值的复选框？

Answer 1

您可以像这样使用querySelectorAll()：

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

这转换为：

获取具有属性“value”的所有输入，并且具有非空白的属性“value”。

In this demo，它会禁用带有非空值的复选框。

Answer 2

额外提示：

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

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

你也知道你可以这样做：

node.parentNode.querySelectorAll('div');

这与jQuery的相同：

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

哪个会有效地找到“节点”中的所有div，然后递归下面，HOT DAMN！

Answer 3

以您的示例为例：

$$('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

在示例中

用document.querySelectorAll替换$$：

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

将示例直接用于：

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

一些补充：

UNION ALL

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

3 个答案: