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

Question

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

这是我做的。

$("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>

Answer 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 是一个字符串，其中包含所有标签的串联文本，这些标签是已选中复选框的下一个兄弟

Answer 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"

Answer 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/

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

Getting multiple checked checkbox labels into an array

javascript

arrays

checkbox

jquery