特定の属性が設定されている要素に対してのみquerySelectorAllを使用する方法

124

属性が設定されdocument.querySelectorAllているすべてのチェックボックスに使用しようとしていvalueます。

value設定されていないページに他のチェックボックスがあり、値はチェックボックスごとに異なります。ただし、IDと名前は一意ではありません。

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

値が設定されているチェックボックスだけを選択するにはどうすればよいですか？

javascript css-selectors selectors-api

— ソリン
ソース

これには空白が含まれますか？のようなものvalues=""

— ジョセフ

他のチェックボックスにはまったく値がないため、それを含める必要はありません。

— ソリン

回答:

216

次のquerySelectorAll()ように使用できます：

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

これは次のように変換されます。

属性「値」を持つすべての入力を取得し、属性は「空白」ではない「値」です。

このデモでは、空白以外の値のチェックボックスを無効にします。

— ジョセフ
ソース

しかし、チェックボックスタイプの入力のみを選択するにはどうすればよいですか？値の属性を持つ他の多くのinputタグがありますが、チェックボックスだけが必要です。

— ソリン

@Soryn追加[type="checkbox"]。私の答えを更新しました。

— ジョセフ

すばらしい答えです！これにより、DOMトラバーサル用のミニライブラリにjQueryを含める必要がほとんどなくなります。以下の回答にいくつかの追加のヒントがあります。

— mattdlockyer 2014年

この構文が何であるか教えてくださいinput [value] [type = "checkbox"]：not（[value = ""]これまでにこのような構文をJavaScriptで見たことがない

— blackHawk

@blackHawk構文はCSSセレクターを使用します。MDNで指定されているように、「カンマで区切られた1つ以上のCSSセレクターを含む文字列です」。CSSセレクターについては、こちらをご覧ください。

— martieva

追加のヒント：

複数の「nots」、非表示ではなく無効ではない入力：

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

また、これができることを知っていましたか？

node.parentNode.querySelectorAll('div');

これはjQueryのものと同等です：

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

これにより、「ノード」以下のすべてのdivが効果的に再帰的に検索されます。HOTDAMN！

— Mattdlockyer
ソース

あなたの例で：

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

— プネルード
ソース