How to get the values of all checked checkboxes using jQuery
Solution 1
Try This.
HTML CODE
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.btnadd').click(function(){
var checkValues = $('input[name=checkboxlist]:checked').map(function()
{
return $(this).val();
}).get();
$.ajax({
url: 'loadmore.php',
type: 'post',
data: { ids: checkValues },
success:function(data){
}
});
});
});
</script>
<input type="checkbox" name="checkboxlist" value="1" checked="checked" />
<input type="checkbox" name="checkboxlist" value="2" checked="checked" />
<input type="checkbox" name="checkboxlist" value="4" />
<input type="checkbox" name="checkboxlist" value="5" checked="checked" />
<input type="checkbox" name="checkboxlist" value="6" />
loadmore.php CODE
<?php
print_r($_POST['ids']);
?>
OUTPUT IN loadmore.php
Array
(
[0] => 1
[1] => 2
[2] => 5
)
That's IT.
Cheers.
Solution 2
Use this function :
function checkboxValues() {
var allVals = [];
$(':checkbox').each(function() {
allVals.push($(this).val());
});
return allVals; // process the array as you wish in the function so it returns what you need serverside
}
and your ajax call will look like this:
$.ajax({
url: 'process.php',
type: 'post',
data: { checkboxValues() },
success:function(data){ }
Solution 3
You can use something like this before your ajax call:
var ids=[];
$('input[type=checkbox]:checked').each(function(){
ids.push($(this).val());
});
But it is strongly recommended to wrap your checkboxes in some div, and represent it in your jquery selector. Because in current way you can select and send to server some other checkboxes on your page.
Solution 4
Wrap your checkboxes in a <form>
tag and name your checkboxes using PHP array notation:
<form id="form1">
<input type="checkbox" name="item[]" value="1">
<input type="checkbox" name="item[]" value="2">
<input type="checkbox" name="item[]" value="3">
</form>
The use jQuery.serialize()
:
$(function () {
$('.btnadd').click(function () {
$.ajax({
url: 'process.php',
type: 'post',
data: $("#form1").serialize(),
success: function (data) {}
});
});
});
On the server side, $_POST["item"]
will be an array containing only the checked values.
GrayFullBuster
Updated on July 23, 2022Comments
-
GrayFullBuster almost 2 years
I don't know how to pass the selected values of the checkboxes. Any help or suggestions will be a big help for me.
As of now here is my code I am stuck in passing the values of the checkboxes
index.php
<table> <?php foreach($response as $item){ echo '<tr><td><input type="checkbox" value="' .$item['id']. '"></td><td>' . $item['name'] . '</td></tr>'; } ?> </table> <button type="button" class="btnadd">AddSelected</button> <script type="text/javascript"> $(function() { $('.btnadd').click(function() { $.ajax({ url: 'process.php', type: 'post', data: { }, // what should I put here to pass the value of checked checkboxes success: function(data) {} }); }); }); </script>
process.php
<?php $array_ids = $_POST['ids']; // this will retrieve the id's ?>
-
GrayFullBuster over 11 yearsnice, but my checkbox is from a table not in form :) anyways thank you.
-
Salman A over 11 yearsYou can put the table inside the form tag. Absolutely nothing wrong with that.
-
mickmackusa about 6 yearsYour
jQuery.serialize()
link says that serialize() does not accept any arguments, so you need to move the selector out of the parentheses and write it as a parenthetical expression after$
.