我正在尝试document.querySelectorAll
用于所有value
设置了属性的复选框。
页面上还有其他未value
设置的复选框,每个复选框的值不同。id 和名称不是唯一的。
例子:
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
如何只选择那些设置了值的复选框?
我正在尝试document.querySelectorAll
用于所有value
设置了属性的复选框。
页面上还有其他未value
设置的复选框,每个复选框的值不同。id 和名称不是唯一的。
例子:
<input type="checkbox" id="c2" name="c2" value="DE039230952"/>
如何只选择那些设置了值的复选框?
你可以querySelectorAll()
这样使用:
var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');
这转化为:
获取具有属性“值”的所有输入,并且具有非空白的属性“值”。
在此演示中,它禁用了具有非空白值的复选框。
用你的例子:
<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 $()
额外提示:
多个“nots”,未隐藏且未禁用的输入:
:not([type="hidden"]):not([disabled])
你也知道你可以这样做:
node.parentNode.querySelectorAll('div');
这相当于 jQuery 的:
$(node).parent().find('div');
这将有效地递归地找到“节点”及以下的所有div,HOT DAMN!