How to select/unselect generated checkbox rows with a separate checkbox in header

Question

can someone help me with my code, the code below would generate rows after the query, each row would have its own checkbox...i also have a checkbox in the header...what i want is to check or select all rows using only the checkbox in the header but at the same time i should still be able to select a checkbox per row

echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
<tr>
<th align='center'><input name=checkall type=checkbox value='' /></th>
<th align='center'>Remedy Ticket No.</th>
<th align='center'>Phone/Incident No.</th>
<th align='center'>Category 2</th>
<th align='center'>Category 3</th>
<th align='center'>Status</th>
<th align='center'>Create Date</th>
<th align='center'>Severity</th>
<th align='center'>Ban Type</th>
<th align='center'>Resolved Date</th>
</tr>"; 

while($info = mysql_fetch_array($myData)) 
{ 
echo "<form action='getdata.php' method='post'>";

echo"<tr>"; 
echo "<td align='center'>" . "<input type=checkbox name=checkbox value=" . " </td>";
echo  "<td align='center'>" . $info['ars_no'] . "<input type=hidden name=ars_no value=" . $info['ars_no'] . " </td>";
echo  "<td align='center'>" . $info['phone_number'] . "<input type=hidden name=phone_number value=" . $info['phone_number'] . " size='11' maxlength='11' /> </td>"; 
echo  "<td align='center'>" . $info['category_1'] . "<input type=hidden name=category_1 value=" . $info['category_1'] . "' /> </td>"; 
echo  "<td align='center'>" . $info['category_2'] . "<input type=hidden name=category_2 value=" . $info['category_2'] . "' /> </td>";
echo  "<td align='center'>" . $info['status'] . "<input type=hidden name=status value=" . $info['status'] . "' /> </td>"; 
echo  "<td align='center'>" . $info['create_date'] . "<input type=hidden name=create_date value=" . $info['create_date'] . "' /> </td>";
echo  "<td align='center'>" . $info['trouble_type_priority'] . "<input type=hidden name=trouble_type_priority value=" . $info['trouble_type_priority'] . " size='1' maxlength='1' /> </td>"; 
echo  "<td align='center'>" . $info['ban_type'] . "<input type=hidden name=ban_type value=" . $info['ban_type'] . " size='1' maxlength='1' /> </td>";
echo  "<td align='center'>" . "<input type=text name=resolved_date value=" . $info['resolved_date'] . " size='8' maxlength='8' /> </td>";

View : http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html — mukund, Apr 16 '13 at 10:09
possible duplicate of [Select All Checkbox](http://stackoverflow.com/questions/7259335/select-all-checkbox) — hjpotter92, Apr 17 '13 at 02:32

score 1 · Answer 1 · answered Apr 16 '13 at 10:00

Use this

$('input[name=checkall]').click(function(){
    var checked = $('input[name=checkall]').is(':checked');
    if (checked) {
        $('input:checkbox').attr('checked','checked');
    } else {
        $('input:checkbox').attr('checked','');
    }

});

Daanvn · Answer 2 · 2013-04-16T10:36:10.883

You will need to use javascript for this. The checkbox would look like this:

<input name="CheckAll" type="checkbox" id="CheckAll" value="Y"  onClick="ClickCheckAll(this);">

The dynamically created checkboxes should look like this:

<td align="center"><input type="checkbox" name="chkDel[]"  id="chkDel<?=$i;?>"  value="<?=$info["ars_no"];?>"></td>

And then use this javascript:

<script language="JavaScript">  
function ClickCheckAll(vol)  
{  

var i=1;  
for(i=1;i<=document.frmMain.hdnCount.value;i++)  
{  
if(vol.checked == true)  
{  
eval("document.frmMain.chkDel"+i+".checked=true");  
}  
else  
{  
eval("document.frmMain.chkDel"+i+".checked=false");  
}  
}  
}  
</script>

You will also have to change your while loop to this:

<?php 
$i = 0;  
while($objResult = mysql_fetch_array($objQuery))  
{  
$i++;  
?>

Sabari · Accepted Answer · 2013-04-16T12:37:21.273

You can use jQuery for this.

Here you have to check for two conditions; when the main checkbox is checked and when all the child checkboxes are checked. So when the main checkbox is checked all the checkboxes should be checked. Similarly when all the child checkboxes are checked the main checkbox should also be checked. You have to take care of these two cases.

There are two methods:

Method 1 (using checkbox name)

jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').attr('checked', this.checked);
    jQuery('input[name=checkbox]').attr('checked', this.checked);
  });


  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){

    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").attr("checked", "checked");
    } else {
        jQuery("input[name=checkall]").removeAttr("checked");
    }
  });
});

Method 2 (using checkbox class)

You have to add a class for the main header checkbox and another class to all other checkbox. So your script will be :

jQuery(".selectall").click(function () {
    jQuery('.selectall').attr('checked', this.checked);
    jQuery('.child_checkbox').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
jQuery(".child_checkbox").click(function(){

    if(jQuery(".child_checkbox").length == jQuery(".child_checkbox:checked").length) {
        jQuery(".selectall").attr("checked", "checked");
    } else {
        jQuery(".selectall").removeAttr("checked");
    }
});

Now add the class selectall to your main checkbox and class child_checkbox to all child checkboxes in the loop. So your HTML will be

echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
<tr>
<th align='center'><input name='checkall' type='checkbox' value='' class='selectall'/></th>
<th align='center'>Remedy Ticket No.</th>
<th align='center'>Phone/Incident No.</th>
<th align='center'>Category 2</th>
<th align='center'>Category 3</th>
<th align='center'>Status</th>
<th align='center'>Create Date</th>
<th align='center'>Severity</th>
<th align='center'>Ban Type</th>
<th align='center'>Resolved Date</th>
</tr>"; 

while($info = mysql_fetch_array($myData)) 
{ 
echo "<form action='getdata.php' method='post'>";

    echo"<tr>"; 
    echo "<td align='center'>" . "<input type='checkbox' name='checkbox' value='' class='child_checkbox'/></td>";
    echo  "<td align='center'>" . $info['ars_no'] . "<input type=hidden name=ars_no value=" . $info['ars_no'] . " </td>";
    echo  "<td align='center'>" . $info['phone_number'] . "<input type=hidden name=phone_number value=" . $info['phone_number'] . " size='11' maxlength='11' /> </td>"; 
    echo  "<td align='center'>" . $info['category_1'] . "<input type=hidden name=category_1 value=" . $info['category_1'] . "' /> </td>"; 
    echo  "<td align='center'>" . $info['category_2'] . "<input type=hidden name=category_2 value=" . $info['category_2'] . "' /> </td>";
    echo  "<td align='center'>" . $info['status'] . "<input type=hidden name=status value=" . $info['status'] . "' /> </td>"; 
    echo  "<td align='center'>" . $info['create_date'] . "<input type=hidden name=create_date value=" . $info['create_date'] . "' /> </td>";
    echo  "<td align='center'>" . $info['trouble_type_priority'] . "<input type=hidden name=trouble_type_priority value=" . $info['trouble_type_priority'] . " size='1' maxlength='1' /> </td>"; 
    echo  "<td align='center'>" . $info['ban_type'] . "<input type=hidden name=ban_type value=" . $info['ban_type'] . " size='1' maxlength='1' /> </td>";
    echo "</tr>"; 
}

UPDATE :

I think you are using the latest version of jQuery which is jQuery 1.9.1. So there is a change in the method in the script. Instead of attr you have to use prop. The attr method has been depreciated. You can check this link for more info on that jQuery attr-vs-prop

So your script for Method 1 (using checkbox name) should be changed to :

jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').prop('checked', this.checked);
    jQuery('input[name=checkbox]').prop('checked', this.checked);
  });


  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){

    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").prop("checked", true);
    } else {
        jQuery("input[name=checkall]").prop("checked", false);
    }
  });
});

If you are using class Method 2 (using checkbox class) then it should be :

jQuery(document).ready(function () {
    jQuery(".selectall").click(function () {
        jQuery('.selectall').prop('checked', this.checked);
        jQuery('.child_checkbox').prop('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    jQuery(".child_checkbox").click(function(){

        if(jQuery(".child_checkbox").length == jQuery(".child_checkbox:checked").length) {
            jQuery(".selectall").prop("checked", true);
        } else {
            jQuery(".selectall").prop("checked", false);
        }
    });
});

Also please format your HTML correctly seems to be missing quotes around values of input attributes. Even if it is not strict but is better to follow that.

Hope this helps :)

thanks Sabari this answer best fits my question after trying all the answers that was provided...and thanks to those who have given their time as well... — dencio yap, Apr 16 '13 at 10:45
Hi Sabari, I have used ur Method 1 by the way...but what is happening is that it allows me to select/deselect but wont allow me to re-select again...can we have that option be added? — dencio yap, Apr 16 '13 at 10:53
@dencioyap I din't get what you mean. What you mean by re-select. — Sabari, Apr 16 '13 at 10:55
okay here's how it goes...when i click the checkall(checkbox) its also checking all the checkbox in the rows below it so that functionality works, then when i uncheck the checkall(checkbox) it clears the checkmarks in the rows below so that functionality works as well but when i tried to click the checkall(checkbox) again to re-select the rows below it...it does nothing anymore. hope that clears it... — dencio yap, Apr 16 '13 at 11:14
@dencioyap are you sure you wrote it inside jQuery(document).ready — Sabari, Apr 16 '13 at 11:16
Also try alerting something inside the click function. Check if the click handler is workin — Sabari, Apr 16 '13 at 11:17
sorry Sabari im a novice when it comes to php/js coding can u tell me how to do this: "@dencioyap are you sure you wrote it inside jQuery(document).ready" — dencio yap, Apr 16 '13 at 11:25
thanks a lot for ur help but then again, it only allows me to check/uncheck the rows once...when i check the header checkbox it selects the rows and when i un-checked the header checkbox it deselects the rows and it wont allow me to re-select the rows when i checked the header checkbox...only the header checkbox is getting checked and none of the rows... — dencio yap, Apr 16 '13 at 12:13
@dencioyap is there any link I can check with. May be some js issue. Can you check your browser console for any errors ? — Sabari, Apr 16 '13 at 12:14
@dencioyap by the time Can I know which version of jQuery you are using — Sabari, Apr 16 '13 at 12:25
and by the way...if its not too much can u please also check my other post: "need to delete selected rows through checkbox with a single Delete button" maybe u can help me with it... — dencio yap, Apr 16 '13 at 12:41

score 0 · Answer 4 · answered Apr 16 '13 at 10:06

Try to use jQuery.

Add id to header checkbox: <input id="checkall" type="checkbox" value='' />
Add classes to other checkboxes: <input class="chkBox" type="checkbox" value='' />
Add link to jQuery library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Add JS-snippet to your page

<script language="Javascript">
$(function () {
    $('#checkall').on('click', function () {
        $('.chkBox').attr('checked', true);
    });
});
</script>

How to select/unselect generated checkbox rows with a separate checkbox in header

4 Answers4