将多个选中的复选框标签放入数组中答案

【问题标题】：Getting multiple checked checkbox labels into an array将多个选中的复选框标签放入数组中
【发布时间】：2015-05-12 04:49:39
【问题描述】：

我希望将表单中所有选中的复选框放入一个数组中。

这就是我所做的。

$("div.category-panel input:checked").next ('label').text(); 完美地获取了所有选中的复选框，但它只是将它们一起显示为一个文本。例如，checkbox1、checkbox2 和 checkbox3（如果选中）将显示为 checkbox1checkbox2checkbox3。

我希望将这些不同的复选框放在一个数组中，以便我可以使用它们。

    $('.submit').on("click", function(e) {

    //got all checked checkboxes into 'children'.            
    children = $("div.category-panel input:checked").next ('label').text();

    //Put in array.            
    var array = [];
    var i = 0;
    $.each(children, function(key, value){
        array.push($(this).text());
    });

    //Show the array.
    for (var i = 0; i < array.length; i++) {
      console.log(array[i]);
    }

 });

HTML，以防万一：-

<div class="category-panel">

<input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked"> <label class="option" for="edit-tid-46">CheckBox1</label>

<input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked"> <label class="option" for="edit-tid-47">CheckBox2</label>

<input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked"> <label class="option" for="edit-tid-44">CheckBox3</label>

<input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked"> <label class="option" for="edit-tid-48">CheckBox4</label>

</div>

【问题讨论】：

标签： javascript jquery arrays checkbox

【解决方案1】：

你可以用.map()点赞

 $('.submit').on("click", function (e) {

     //got all checked checkboxes into 'children'.            
     var array = $("div.category-panel input:checked").next('label').map(function(){
         return $(this).text();
     }).get();

     //Show the array.
     for (var i = 0; i < array.length; i++) {
         console.log(array[i]);
     }

 });

$('.submit').on("click", function(e) {

   //got all checked checkboxes into 'children'.            
   var array = $("div.category-panel input:checked").next('label').map(function() {
     return $(this).text();
   }).get();

   //Show the array.
   for (var i = 0; i < array.length; i++) {
     console.log(array[i]);
   }

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="category-panel">
  <input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked" />
  <label class="option" for="edit-tid-46">CheckBox1</label>
  <input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked" />
  <label class="option" for="edit-tid-47">CheckBox2</label>
  <input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked" />
  <label class="option" for="edit-tid-44">CheckBox3</label>
  <input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked" />
  <label class="option" for="edit-tid-48">CheckBox4</label>
</div>
<button class="submit">submit</button>

在您的情况下，children 是一个字符串，其中包含所有标签的连接文本，这些标签是选中复选框的下一个兄弟

【讨论】：

【解决方案2】：

您需要使用.map() 函数来获取所有标签文本作为对象。然后使用.get() 将它们放入数组中：

$("div.category-panel input:checked").next('label').map(function(){
    return $(this).text();
}).get();// ["checkbox1","checkbox2" ,"checkbox3"]

如果您希望它们作为逗号分隔值，请在 .get() 之后使用 .join()

$("div.category-panel input:checked").next('label').map(function(){
  return $(this).text();
}).get().join();//  "checkbox1, checkbox2 ,checkbox3"

【讨论】：

【解决方案3】：

   <input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked" /> <label class="option" for="edit-tid-46">A Value</label>

   <input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked" /> <label class="option" for="edit-tid-47">A Value</label>

   <input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked" /> <label class="option" for="edit-tid-44">A Value</label>

   <input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked" /> <label class="option" for="edit-tid-48">A Value</label>

$('.submit').on("click", function(e) {
    //got all checked checkboxes into 'children'.            
    children = $("div.category-panel input:checked").next ('label');

    //Put in array.            
    var array = [];
    $.each(children, function(){
        array.push($(this).text());
    });

    //Show the array.
    $(array).each(function(){
        console.log(this.toString());
    });

 });

http://jsfiddle.net/7ryhv07e/1/

【讨论】：