StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use <strong><a href="http://jquery.com/" rel="nofollow">jQuery</a></strong> for this. </p> <p>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.</p> <p>There are two methods:</p> <p><strong>Method 1 (using checkbox name)</strong></p> <pre><code>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"); } }); }); </code></pre> <p><strong>Method 2 (using checkbox class)</strong></p> <p>You have to add a class for the main header checkbox and another class to all other checkbox. So your script will be :</p> <pre><code>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"); } }); </code></pre> <p>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</p> <pre><code>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>"; } </code></pre> <p><strong>UPDATE :</strong></p> <p>I think you are using the latest version of jQuery which is <strong><a href="http://code.jquery.com/jquery-1.9.1.min.js" rel="nofollow">jQuery 1.9.1</a></strong>. So there is a change in the method in the script. Instead of <code>attr</code> you have to use <code>prop</code>. The attr method has been depreciated. You can check this link for more info on that <strong><a href="http://jquery.com/upgrade-guide/1.9/#attr-versus-prop" rel="nofollow">jQuery attr-vs-prop</a></strong> </p> <p>So your script for <strong>Method 1 (using checkbox name)</strong> should be changed to :</p> <pre><code>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); } }); }); </code></pre> <p>If you are using class <strong>Method 2 (using checkbox class)</strong> then it should be :</p> <pre><code>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); } }); }); </code></pre> <p>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.</p> <p>Hope this helps :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload