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

我试图对所有设置了 value属性的复选框使用 document.querySelectorAll。

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

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

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

273424 次浏览
小开
最佳答案

你可以这样使用 querySelectorAll():

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

翻译过来就是:

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

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

小开

额外提示:

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

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

你知道你可以这样做吗:

node.parentNode.querySelectorAll('div');

这相当于 jQuery 的:

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

这将有效地找到所有的 div 在“节点”和下面递归，HOT DAMN！

小开

以你为例:

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

提交答案