Check all / uncheck all Checkbox in looping statement - php

Question

i have a problem with my program. Here's my snippet code.
Here's the Javascript/Jquery code.
<script language='javascript'>
///SELECTING CHECKBOXES////
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>
And here's the code where i will integrate that javascript.
<h2>Quotation ID</h2>
<?php
$select_orders = mysql_query ("SELECT * FROM tblorder WHERE project_id = '$project_id' GROUP BY quotation_id") OR DIE (mysql_error());
while ($row2=mysql_fetch_array($select_orders)){
$quote_id = $row2['quotation_id'];
?>
<h3 class="expand"><?php echo $quote_id; ?></h3>
<div class="collapse">
<table align='center' border='1' class='display'>
<thead>
<th><input type='checkbox' onclick='checkall()' id='selectall'/></th>
<th>Product Type</th>
<th width='20px'>Product type code</th>
<th width='20px'>Quantity</th>
<th>Width</th>
<th>Height</th>
<th>Total Sub.</th>
</thead>
<tbody>
<?php
$tots_tots = 0;
$tots_subs = 0;
$select_orders2 = mysql_query ("SELECT * FROM tblorder WHERE project_id = '$project_id' AND quotation_id = '$quote_id'") OR DIE (mysql_error());
while ($row3=mysql_fetch_array($select_orders2)){
$idd = $row3['id'];
$project_id2 = $row3['project_id'];
$order_id = $row3['quotation_id'];
$prod_type = $row3['prod_type'];
$prod_type_code = $row3['prod_type_code'];
$qty = $row3['qty'];
$width = $row3['width'];
$height = $row3['height'];
$tot_sub = $row3['total_subs'];
$tots_subs += $tot_sub;
echo "<tr bgcolor='".$colors[$c++ % 2]."' align='center'>";
echo "<td>
<input type='hidden' name='project_name' value='$project_name'>
<input type='checkbox' name='check_ptc[]' value='$prod_type_code' style='display:none;' checked>
<input type='checkbox' class='case' name='checkbox[]' value='".$idd."'></td>";
echo "
<input type='hidden' name='project_id[]' value='$project_id2'>
</td>";
echo "<td>".$prod_type."
<input type='hidden' name='quotation_id[]' value='$order_id'>
<input type='hidden' name='prod_type[]' value='$prod_type'>
</td>";
echo "<td>".$prod_type_code."
<input type='hidden' name='prod_type_code[]' value='$prod_type_code'>
</td>";
echo "<td>".$qty."</td>";
echo "<td>".$width."</td>";
echo "<td>".$height."</td>";
echo "<td>".$tot_sub."</td>";
echo "</tr>";
}
echo "<tr>";
echo "<td></td><td></td><td></td><td></td><td></td>
<td>
<strong><b>Total:</b></strong>";
echo "</td>";
echo "<td>
<font color='#900'><u><b>$tots_subs</b></u></font>
</td>";
echo "</tr>";
?>
</tbody>
</table>
</div>
<?php
}
?>
Since the table is in the loop. the problem is when the first table appear. and click the first header checkbox it will check all the checkbox in other table. which i dont want to happen. the one i am looking for is if there is a way i can also iterate the ID of the checkbox and its class. or there's any other way to do what i want to happen.
As you can see. those 3 tables have there own checkbox header where i want to be the check all inside there tables. what would be your smart idea how can i do that.
Thanks in advance..

Answer 1

You can do it like this.
$('.allcb').on('click', function(){
var childClass = $(this).attr('data-child');
$('.'+childClass+'').prop('checked', this.checked);
});
FIDDLE
UPDATE
Just apply the class allcb to the main check-boxes and to the child check-boxes apply the class named as chk. This should fit your needs. Here is the updated
FIDDLE

Answer 2

use .prop
$(function () {
var $cases = $('.case');
// add multiple select / deselect functionality
var $all = $("#selectall").click(function () {
$$cases.prop('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$cases.click(function () {
$all.prop("checked", $cases.filter(":not(:checked)").length) != 0);
});
});

Answer 3

try this php code instead script
//check-all / uncheck-all checkbox.
<a onclick="$(this).parent().find(':checkbox').attr('checked', true);"><?php echo $text_select_all; ?></a>/<a onclick="$(this).parent().find(':checkbox').attr('checked', false);"><?php echo $text_unselect_all; ?></a>