CODEWITHSUNDEEP
javascriptjqueryarrayscheckbox
Steve
Steve

Reputation: 2588

Getting multiple checked checkbox labels into an array

I am hoping to get all the checked checkboxes from my form into an array.

Here is what I did.

$("div.category-panel input:checked").next ('label').text(); perfectly gets all the checked checkboxes but it just shows them together as one text. As an example, checkbox1, checkbox2 and checkbox3 (if checked) would show as checkbox1checkbox2checkbox3.

I was hoping to get these different checkboxes in an array so that I can use them.

    $('.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, just in case is:-

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

Upvotes: 1

Views: 1356

Answers (3)

Vishwajeet Bose
Vishwajeet Bose

Reputation: 430

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

you need to use .map() function to get the all labels text as object. then use .get() to get them in array:

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

If you want them as comma separated values, use .join() after .get()

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You can use .map() like

 $('.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>

In your case children is a string, which contains the concatenated text of all label's which are next siblings of checked checkboxes

Upvotes: 2

Related Questions