When you have a form with lots of checkboxes, you may hit a limit to how many you can post. I had this issue with a form that had over 125 checkboxes I found once the limit was reached not all checkboxes could be posted.
My solution was using jQuery to scan all checkboxes read their values then stored as a comma separated list in a hidden input.
Let’s put this into practice below is a table of records wrapped inside a form, the top checkbox when checked all checkboxes underneath will be checked.
Each checkbox has a value. Now the jQuery code needed to toggle the checkboxes:
<form method="get">
<input type='hidden' name="ids" id="ids">
<table class='table table-striped table-hover table-bordered'>
<thead>
<tr>
<th><input type="checkbox" id="selecctall" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
foreach($contacts as $row) {
echo "<tr>";
echo "<td><input type='checkbox' value='$row->id' class='checkbox' /></td>";
echo "<td>$row->firstName</td>";
echo "<td>$row->lastName</td>";
echo "<td>$row->email</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<p><p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> <i class='fa fa-envelope'></i> Submit </button></p>
</form>
Each checkbox has a value. Now the jQuery code needed to toggle the checkboxes:
<script type="text/javascript">
$(document).ready(function () {
//on click check each checkbox
$('#selecctall').click(function (event) {
if (this.checked) {
//loop through each checkbox
$('.checkbox').each(function () {
$(this).prop('checked', true); //check
});
} else {
//loop through each checkbox
$('.checkbox').each(function () {
$(this).prop('checked', false); //uncheck
});
}
//collect each checkbox value
var checkedRows = $('.checkbox:checked').map( function() {
return this.value;
}).get().join(",");
//add the comma seperated list to the input
$('#ids').val(checkedRows);
});
//on checking a single checkbox update the comma seperated list
$('.checkbox').change(function(){
var checkedRows = $('.checkbox:checked').map( function() {
return this.value;
}).get().join(",");
$('#ids').val(checkedRows);
});
});
</script>
0 comments
Add a comment