How to get multiple checkbox values using jquery?

To get multiple checkbox values using jquery, can done by a simple way. Here is the code:

You need two files one is home.php file and another one is ajax_filter.php file by which you will show the data.

At first here is your home page:
Just write the attribute for calling the function in your input field. Like here "SortBySubcat" function is used in onCLick attribute.

<!-- home.php file start -->
<ul>
     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" checked="" value="Adhesive" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Adhesive </label>
     </span>
     </div>
     </li>
	
     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" value="Fluid" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Fluid </label>
      </span>
      </div>
      </li>
	
     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" value="Folder" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Folder </label>
      </span>
      </div>
      </li>

     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" value="Pen" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Pen </label>
      </span>
      </div>
      </li>
		
     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" value="Register" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Register </label>
      </span>
      </div>
      </li>
		
     <li>
     <div class="check-box">
     <span>
       <input type="checkbox" class="checkbox" name="subcats" value="Others" onclick="SortBySubcat(this.value)">
        <label for="clothing"> Others </label>
      </span>
      </div>
      </li>			  
</ul>
<br>
<p> And you will get the data here: </p>
<div id="filter_products"> Adhesive </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<!-- Use this path to call the script -->

<script type="text/javascript">
function SortBySubcat(s)
{
   var subcats_id = '';
$('[name="subcats"]').each(function(i,e) {
    if ($(e).is(':checked')) {
        var comma = subcats_id.length===0?'':', ';
        subcats_id += (comma+e.value);
}
});
    var gst_url= "ajax_filter.php"; // this ajax file is used to show the data where you'll get it
    jQuery.ajax({
    type: "GET",
    url: gst_url,
    data: "subcats_id="+subcats_id,
    success: function(data) {
       $('#filter_products').html(data);
	  }
	  });
}
</script>
<!-- home.php file end -->

After finishing this code, here is ajax_filter.php

<?php
$get_category=$_GET['subcats_id'];
echo $get_category;
?>

Output: