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.

运行以下代码段以查看控制台中的输出。
此示例将返回：

选中的复选框数组中的值
数组中选中的复选框文本
数组中的选中复选框（如果需要，可以选择）

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>

获取所选复选框的值和文本

2 个答案: