選択されたチェックボックス属性の配列を取得する

Question

私は現在、選択した項目のJS配列に変換するために必要な多くのHTMLチェックボックスがある場所がたくさんあります。例えば：私の質問は、ちょうどこの

var items = []; 
$('.example[data-item]:checked').each(function (_, e) { 
    items.push(Number($(e).data('item'))); 
}); 

です

：

<input type="checkbox" class="example" data-item="3"> 
<input type="checkbox" class="example" data-item="5"> 
<input type="checkbox" class="example" data-item="7"> 
<input type="checkbox" class="example" data-item="11"> 

それから私は、配列に選択された値をパックするために、このようなロジックの多くを持っているでこれを行うにはいくつかの素晴らしい方法がありますワンライナー例えば、（必要であれば、jQueryのは、許可されている）：

var items = /* magic */; 

私はこのための関数を書くことができ実現し、明らかにそうでないと、それを実行する方法はありません場合、私はしますが、私が探していますいくつかの内蔵JSマジックのために一度にすべてを行うことができます。完全のために

---

ここに抜粋です：

$('#button').click(function() { 
 
    var items = []; 
 
    $('.example[data-item]:checked').each(function (_, e) { 
 
    items.push(Number($(e).data('item'))); 
 
    }); 
 
    alert(JSON.stringify(items)); 
 
});

label { display: flex; align-items: center; } 
 
div { display: inline-flex; flex-direction: column; } 
 
button { margin: 1ex; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<label><input type="checkbox" class="example" data-item="3"> Item 3</label> 
 
<label><input type="checkbox" class="example" data-item="5"> Item 5</label> 
 
<label><input type="checkbox" class="example" data-item="7"> Item 7</label> 
 
<label><input type="checkbox" class="example" data-item="11"> Item 11</label> 
 
<label><input type="checkbox" class="example" data-item="13"> Item 13</label> 
 
<label><input type="checkbox" class="example" data-item="17"> Item 17</label> 
 
<label><input type="checkbox" class="example" data-item="19"> Item 19</label> 
 
<button id="button">Click Me</button> 
 
</div>

Answer 1

を別の方法はmap()を使用してあなたが必要なものを回す：

$('#button').click(function() { 
 
    var items = $(".example[data-item]:checked").map(function() { 
 
    return $(this).data('item'); 
 
    }).get(); 
 
    console.log(items); 
 
});

label { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
div { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
} 
 

 
button { 
 
    margin: 1ex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label><input type="checkbox" class="example" data-item="3"> Item 3</label> 
 
    <label><input type="checkbox" class="example" data-item="5"> Item 5</label> 
 
    <label><input type="checkbox" class="example" data-item="7"> Item 7</label> 
 
    <label><input type="checkbox" class="example" data-item="11"> Item 11</label> 
 
    <label><input type="checkbox" class="example" data-item="13"> Item 13</label> 
 
    <label><input type="checkbox" class="example" data-item="17"> Item 17</label> 
 
    <label><input type="checkbox" class="example" data-item="19"> Item 19</label> 
 
    <button id="button">Click Me</button> 
 
</div>

Answer 2

はいあなたは、マップ機能を使用することができます：私はあなたのコードに何か問題が表示されていない

var tempValue=$('input:checkbox').map(function(n){ 
      if(this.checked){ 
       return this.value; 
       }; 
     }).get().join(','); 
    console.log(tempValue); 

Answer 3

const checkedItems = Array.from(document.querySelectorAll('[checked]')).reduce((items, el) => { 
    // save whatever you want from the elmenent here 
    items = items.concat(el) 
    return items; 
}, [])