How to store all checkbox id and values in a 2D array and and to php pages using ajax?

Question

I have an input type=checkbox that contains id from 1-10 . I need to select some check boxes and when I click on a particular click event I need to store all checkboxes values (1-0/ checked-not checked) and id s in 2d array and send to php page using ajax.

<input type="checkbox" id='1' name="ppackages" class="success">

var popularpackages = [];

$("input:checkbox").each(function(){
    var $this = $(this);
      popularpackages.push($this.attr("id"));
});

alert(popularpackages);

The output is 1,2,3,4,5,6,7,8,9,10 But I need as (id,checked/not checked) (1,1),(2,0),.....(10,0)

Answer 1

To achieve this you can use map() to build the array, then return the id and checked properties as a sub array, like this:

 var popularpackages = $("input:checkbox").map(function() { return [[parseInt(this.id, 10), this.checked ? 1 : 0]]; }).get(); console.log(popularpackages); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="1" name="ppackages" class="success" checked="checked" /> <input type="checkbox" id="2" name="ppackages" class="success" /> <input type="checkbox" id="3" name="ppackages" class="success" /> <input type="checkbox" id="4" name="ppackages" class="success" /> <input type="checkbox" id="5" name="ppackages" class="success" checked="checked" /> <input type="checkbox" id="6" name="ppackages" class="success" /> <input type="checkbox" id="7" name="ppackages" class="success" /> <input type="checkbox" id="8" name="ppackages" class="success" /> <input type="checkbox" id="9" name="ppackages" class="success" checked="checked" /> <input type="checkbox" id="10" name="ppackages" class="success" /> 

You can then send the popularpackages array to your PHP logic using $.ajax , or any of jQuery's other AJAX methods, as you normally would.