How to get multiple checkbox values using jquery?

by Lalita 06-Jun-19

0 99


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:

How to get multiple checkbox values using jquery?


Share:


Comments

    No Comments Yet.

Leave a Reply