すべての入力ボックスを取得し、属性値を取得します

Question

チェックボックスをオンにして属性値を取得する必要があるチェックボックスの一覧があります。私にチェックを入力要素の配列を与える

res.querySelectorAll('.node:checked') 

、私はこの要素の配列を反復処理し、各上

getAttribute('data-keyvalue') 

を行うためにforループを使用することができます。しかし、それが可能であることは、私はすべての私の検索はに達し、最終的に、同じ問題に出くわした

querySelectorAll 

Answer 1

あなたは配列にquerySelectorAllのNodeListで出力を変換してから確認し、チェックボックスのdata-keyvalue属性を取得するためにarray#mapを使用するArray#fromを使用することができます。

var checkboxAttributes = Array.from(document 
 
    .querySelectorAll('.node:checked')) 
 
    .map(input => input.getAttribute('data-keyvalue')); 
 
console.log(checkboxAttributes);

<input class="node" data-keyvalue="7" type="checkbox" checked> 
 
<input class="node" data-keyvalue="8" type="checkbox"> 
 
<input class="node" data-keyvalue="9" type="checkbox" checked> 
 
<input class="node" data-keyvalue="10" type="checkbox" checked> 
 
<input class="node" data-keyvalue="11" type="checkbox">

Answer 2

にのみ1行、何かにそれらを得るために、あなたはそれらを一つずつ処理し、いずれかの構築する必要がありますあなた自身の配列や文字列あなたのためにこれを行う関数を作成してみて、それらをすべて取得する必要があるときは、関数は必要な形式でデータを与えます。

Answer 3

consoleにチェックマークを付けると、チェックされたデータ属性値の配列が記録されます。

var chk = Array.prototype.slice.call(document.querySelectorAll('.node:checked')).map(function(node) { 
 
    return node.getAttribute('data-keyvalue'); 
 
}) 
 
console.log(chk);

<input type="checkbox" class="node" checked data-keyvalue="1" /> 
 
<input type="checkbox" class="node" checked data-keyvalue="2" /> 
 
<input type="checkbox" class="node" checked data-keyvalue="3" /> 
 
<input type="checkbox" class="node" data-keyvalue="4" /> 
 
<input type="checkbox" class="node" data-keyvalue="5" /> 
 
<input type="checkbox" class="node" checked data-keyvalue="6" /> 
 
<input type="checkbox" class="node" checked data-keyvalue="7" />