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]);
     }

 });

＆＃13;

$('.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]);
   }

 });

＆＃13;

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

＆＃13;

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

Answer 2

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

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

如果您希望将它们作为逗号分隔值，请在.join()

之后使用.get()

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

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

3 个答案: