Best Way to Get All Selected Checkboxes Values in Jquery

Getting all selected checkboxes in an array

Formatted :

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Hopefully, it will work.

Best way to get all selected checkboxes VALUES in jQuery

You want the :checkbox:checked selector and map to create an array of the values:

var checkedValues = $('input:checkbox:checked').map(function() {
    return this.value;
}).get();

If your checkboxes have a shared class it would be faster to use that instead, eg. $('.mycheckboxes:checked'), or for a common name $('input[name="Foo"]:checked')

- Update -

If you don't need IE support then you can now make the map() call more succinct by using an arrow function:

var checkedValues = $('input:checkbox:checked').map((i, el) => el.value).get();

How to get all the value of checked checkboxes using jquery/javascript?

You can simply use jQuery's .map() and .get() on all the checked check boxes:

$("label > span:contains('OTHERS')").prev().prop('checked', false);
var valor = $('input[type=checkbox]:checked').map(function(){  return this.value; }).get();console.log(valor);
$("label > span:contains('OTHERS')").prev().change(function(){  if(!this.checked) alert('Others unchecked');});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group" id="documents">   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>   <br>   </label>   <div style="padding-bottom:5px"></div>   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>   <br>   </label>   <div style="padding-bottom:5px"></div>   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>   <br>   </label>   <div style="padding-bottom:5px"></div></div>

How to retrieve checkboxes values in jQuery

Here's one that works (see the example):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Update

Some number of months later another question was asked in regards to how to keep the above working if the ID changes. Well, the solution boils down to mapping the updateTextArea function into something generic that uses CSS classes, and to use the live function to monitor the DOM for those changes.

use jQuery to get values of selected checkboxes

In jQuery just use an attribute selector like

$('input[name="locationthemes"]:checked');

to select all checked inputs with name "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Demo

---

In VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Demo

---

In ES6/spread operator

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Demo

Iterating through all selected checkboxes and get the value of input boxes in jquery

Try this:

$(document).ready(function(){
        $( "input[type=checkbox]" ).each(function(){
            if($(this).is(':checked'))
            {
                var value = $(this).closest('tr').find($( "input[type=text]" )).val();
                alert(value);
            }
        });
    });

Using jquery to get all checked checkboxes with a certain class name

$('.theClass:checkbox:checked') will give you all the checked checkboxes with the class theClass.

jQuery Datatables, How to get all selected checkboxes from EVERY page

You can use datatables row index API to get the index of the clicked row and on every checkbox change the data object can be modified.

$(document).ready(function(){
   var data = new Object();

   var table = $('#addUsersToAboTable').DataTable();

   $('#addUsersToAboTable').on('change', ':checkbox', function () {
     data[table.row($(this).parents('tr').get(0)).index()] = this.checked;
   });

   $('#getDataBtn').on('click',function(){
     console.log(data);
   });
});

Note: Above code saves the value as true/false while you save it as 0/1 but I hope the logic here is clear

Snippet:

$(document).ready(function(){  var data = new Object();    var table = $('#addUsersToAboTable').DataTable();    $('#addUsersToAboTable').on('change', ':checkbox', function () {   data[table.row($(this).parents('tr').get(0)).index()] = this.checked;  });    $('#getDataBtn').on('click',function(){    console.log(data);  });});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
<button type="button" id="getDataBtn" class="btn btn-success">Get Data</button><table id="addUsersToAboTable" class="table table-hover">  <thead>    <tr>      <th>Firstname</th>      <th>Lastname</th>      <th> </th>    </tr>  </thead>  <tbody>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>    <tr><td>Max</td><td>Mustermann</td><td><input type="checkbox" value = 1></td></tr>  </tbody></table><br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Get all checked checkboxes, possibly with same value

loop through checked element - create string from it and add in alertbox , Add this script:

Demo: http://jsfiddle.net/9cdjjsL5/

    var a = [];
    $("input:checked").each(function() {
        a.push($(this).val());
    });
    var str = a.join(', ');

Cannot get all values of selected checkboxes with jQuery

I fixed the problem mentioned in your question. I added a for loop to loop through all the item in salad, which was actually an array. This is helpful when you have a vast selection.

There is one bug that you may need to fix yourself: If you choose all three salads the two-salad only message comes up but all three salads show up in the #output. The only reason could be is that the summarizePackages() function runs first and I tried to fix it but with no success.

Anyways, here is the code:

function summarizePackages() {            //get inside the div that's holding the buttons            var packages = $('.expander-content > .item');            var summary = '';
            packages.each(function(index, pkg) {                pkg = $(pkg);
                var name = $.trim(pkg.find('h3').text());                var entree = pkg.find('[name^="Entree Item"]:checked');                var salad = pkg.find('[name^="Salad Name"]:checked');                console.log(salad.length);                var delivery = pkg.find('[name^="Delivery Time"]:checked');                var hasOrder = pkg.find('input:checked').length > 0;
                if (hasOrder) {                    summary += 'Name of package: <b>' + name + '</b>';                    summary += '<br>';
                    if (entree.length) {                        summary += 'Entree selected: <b>' + entree.val() + '</b>' + '<br>';                    }                    if (salad.length) {                      summary += 'Salads selected: <b>'                      for (var i = 0;i < salad.length;i++) {                          if (salad.length > 1 && i === 0) {                              summary += salad[i].value + " and ";                            } else {                              summary += salad[i].value + " ";                            }                        }                        summary += '</b>' + '<br>';                    }                    if (delivery.length) {                        summary += 'Delivery selected: <b>' + delivery.val() + '</b>' + '<br>';                    }                    summary += '--------------------';                    summary += '<br>';                }            });
            return summary;        }
        $('#reviewOrder input').on('change', function() {            var summary = summarizePackages();            $('#output').html(summary);        });                //make sure the user only selects two checkboxes        $(document).ready(function () {          $("input[class='onlyTwo']").change(function () {            var maxAllowed = 2;            var cnt = $("input[class='onlyTwo']:checked").length;            if (cnt > maxAllowed) {               $(this).removeAttr("checked")               alert('You can only select ' + maxAllowed + ' salads!');            }        });    });

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Order Form</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body>    <form id="reviewOrder">        <fieldset>            <legend>Suite Packages</legend>            <h6 class="fieldset_description">Please choose your delivery time for each item.<br> 12 order minimum</h6>            <div class="expander">                <a href="javascript:void(0)" class="expander-trigger expander-hidden">View Suite Packages</a>                <div class="expander-content">                    <div class="item">                        <h3 class="product-title">FIRST DOWN PACKAGE<small> $15.50ea</small></h3>                        <p>Includes: Peanuts and pretzels. Your choice of Mustang Dogs served with mustard, ketchup, white onions, relish and buns, or the Nacho Station served with grilled chicken, jalapenos, olives, onions, guacamole, sour cream and nacho cheese. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad. Cookie and brownie platter.</p>                        <div class="entreesGroup">                            <div>                                <p>Entrée (Choose One)</p>                                <input type="radio" name="Entree Item 1" value="Mustang Hot Dog"> Mustang Hot Dog<br>                                <input type="radio" name="Entree Item 1" value="Nacho Station"> Nacho Station<br>                            </div>                            <div>                                <p>Salads (Choose Two)</p>                                <input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Ceasar"> Ceasar<br>                                <input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Pasta"> Pasta <br>                                <input class="onlyTwo" type="checkbox" name="Salad Name 1" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>                            </div>                            <div>                                <p>Choose Delivery Time</p>                                <input type="radio" name="Delivery Time 1" value="Pre Game">Pre Game<br>                                <input type="radio" name="Delivery Time 1" value="Kick Off">Kick Off<br>                                <input type="radio" name="Delivery Time 1" value="Half Time">Half Time<br>                            </div>                        </div>                        <p>How many?</p>                        <input type="text" name="FIRST DOWN PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIRST+DOWN+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />                        <p class="price-per-pallet"><small>* Price per guest: <span> 15.50</span></small></p>                        <div class="row-total">                            <input type="text" class="row-total-input" id="FIRST+DOWN+PACKAGE-mvp-row-total" disabled="disabled">                        </div>                    </div>                    <div class="item">                        <div>                            <h3 class="product-title">FIELD GOAL PACKAGE<small> $20.00ea</small></h3>                            <p>Peanuts, pretzels and snack mix. Your choice of Tri-Tip Sandwiches served with creamy horseradish, salsa, BBQ sauce and rolls or the Chili Bar served with red onions, cheddar cheese, sour cream, onion straws and cornbread pieces. Your choice of 2 salads from pasta salad, Caesar salad or seasonal fruit salad.</p>                        </div>                        <div class="input_grouping_wrap">                            <div>                                <p>Entrée (Choose One)</p>                                <input type="radio" name="Entree Item 2" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches<br>                                <input type="radio" name="Entree Item 2" value="Nacho Station"> Chili Bar<br>                            </div>                            <div>                                <p>Salads (Choose Two)</p>                                <input type="checkbox" name="Salad Name 2" value="Pasta"> Pasta<br>                                <input type="checkbox" name="Salad Name 2" value="Ceasar"> Ceasar<br>                                <input type="checkbox" name="Salad Name 2" value="Seasonal Fruit Salad"> Seasonal Fruit Salad<br>                            </div>                            <div class="delivery-time">                                <p>Choose Delivery Time</p>                                <input type="radio" name="Delivery Time 2" value="Pre Game">Pre Game<br>                                <input type="radio" name="Delivery Time 2" value="Kick Off">Kick Off<br>                                <input type="radio" name="Delivery Time 2" value="Half Time">Half Time<br>                            </div>                        </div>                        <div>                            <p>How many?</p>                            <input type="text" name="FIELD GOAL PACKAGE" value="0" maxlength="2" class="qty num-pallets-input" id="FIELD+GOAL+PACKAGE-mvp-num-pallets" style="margin-bottom:0" />                            <p class="price-per-pallet"><small>* Price per guest: <span> 20.00</span></small></p>                        </div>                        <div class="row-total">                            <input type="text" class="row-total-input" id="FIELD+GOAL+PACKAGE-mvp-row-total" disabled="disabled">                        </div>                    </div>                </div>            </div>        </fieldset>    </form>    <div id="output"></div></body></html>

---

Related Topics