取得値と選択されたチェックボックス

Question

私が選択したチェックボックスの値との配列を取得しようとしていますのテキストボタンのテキストが

<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label> 
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label> 
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label> 
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label> 

をクリックして、私は、チェックボックスの値を取得していますが、どのように配列

でもテキストを取得します

var checkboxes = document.getElementsByName('checkbox[]'); 
var vals = 0; 
for (var i=0, n=checkboxes.length;i<n;i++) { 
    if (checkboxes[i].checked) { 
     vals += ","+checkboxes[i].value; 
    } 
} 

ありがとうございます！

Answer 1

あなたは値の配列を作成するためにmap()を使用することができますが必要です。しかし、それはプロパティとしてラベルを持つオブジェクトを作成するために、より理にかなってあなたの所望の出力を与え

var labelValues = $(':checkbox:checked').map(function() { 
    return [ $(this).next('label').text(), this.value ]; 
}).get(); 

Working example

、このような何か：

var obj = {}; 
$(':checkbox:checked').each(function() { 
    obj[$(this).next('label').text()] = this.value; 
}); 

Working example

Answer 2

@ Roryの答えは、値とテキストの両方を単一の配列に返すのに適しています。しかし、OPは値とテキストを別々の配列に返すように求めているので、私はそれを行うために次の方法を提案します。

あなたがしなければならないことは、テキストから別々の値を得るために2つの配列を使うことだけです。

Working JSFiddle here.

コンソールに出力を表示するには、以下のスニペットを実行します。
この例では戻ります：

1. 選択したチェックボックスの値を配列に
2. 選択したチェックボックスのテキストを配列に
配列の
3. 選択したチェックボックス（場合あなたがそれをしたい場合）

var selectedCheckBoxValue = []; 
 
var selectedCheckBoxText = []; 
 

 
var selectedCheckBox = $(':checkbox:checked').map(function(i) { 
 

 
    selectedCheckBoxValue[i] = this.value; 
 
    selectedCheckBoxText[i] = $(this).next('label').text(); 
 
    return this; 
 
}).get(); 
 

 

 
//Selected Checkboxes Value in a seperate Array 
 
console.log(selectedCheckBoxValue); 
 

 
//Selected Checkboxes Text in a seperate Array 
 
console.log(selectedCheckBoxText); 
 

 
//Selected Checkboxes element in a seperate Array 
 
console.log(selectedCheckBox);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="checkbox" name="checkbox[]" value="1" checked="true" /> 
 
<label>text1</label> 
 
<input type="checkbox" name="checkbox[]" value="2" checked="true" /> 
 
<label>text2</label> 
 
<input type="checkbox" name="checkbox[]" value="3" /> 
 
<label>text3</label> 
 
<input type="checkbox" name="checkbox[]" value="4" checked="true" /> 
 
<label>text4</label>