The full code: (Copy the code below into a new folder with the jquery-1.3.2.min.js file in it and run the page).
Getting a select all checkbox to work can prove to be simple in jQuery. But a select all isn’t just on click of a checkbox on top of the column. It has to do a check on its siblings too. If all children are checked, the select all must also be checked.
Here I have taken a step further ahead and implemented an additional functionality, which you can find it in AJAX control – MutuallyExclusiveCheckBoxExtender.
<html><head>
<script type=”text/javascript” language=”javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function(){$(“#checkall0”).click(function(){$(“#grdView tr”).each(function(){$(this).children(0).eq(0).children(0).attr(‘checked’,($(“#checkall0”).is(‘:checked’))?true:false)})});$(“#checkall1”).click(function(){$(“#grdView tr”).each(function(){$(this).children(0).eq(1).children(0).attr(‘checked’,($(“#checkall1”).is(‘:checked’))?true:false)})});function VerifyAllOrNone(colIndex){var ctrChk=0;var ctrUnChk=0;var rowCount=0;$(“#grdView tr”).each(function(){if(!this.rowIndex)return;if($(this).children(0).eq(colIndex).children(0).is(‘:checked’)) ctrChk++;else ctrUnChk++;rowCount++});$(“#checkall”+colIndex).attr(‘checked’,(ctrUnChk==rowCount)?false:true);$(“#checkall”+colIndex).attr(‘checked’,(ctrChk==rowCount)?true:false)}$(“#grdView”).click(function(e){var $nxtIndex=0;var $cell=$(e.target);var $colIndex=$cell.parents(“td”)[0].cellIndex;var $rowIndex=$cell.parents(“tr”)[0].rowIndex;if($colIndex==0||$colIndex==1){$nxtIndex=($colIndex==0)?1:0;checkMutuallyExclusive($colIndex,$nxtIndex,$rowIndex);VerifyAllOrNone($colIndex)}});function checkMutuallyExclusive(colIndex,nxtIndex,rowIndex){var $chk1=$(“#grdView tr”).eq(rowIndex).children(0).eq(colIndex).children(0);var $chk2=$(“#grdView tr”).eq(rowIndex).children(0).eq(nxtIndex).children(0);if($chk1.is(“:checked”)&& $chk2.is(“:checked”))$chk2.attr(“checked”,false); if($chk1.is(“:checked”)&&rowIndex==0)DeselectAll(nxtIndex);else if($chk2.is(“:checked”)&&rowIndex==0)DeselectAll(colIndex);VerifyAllOrNone(colIndex);VerifyAllOrNone(nxtIndex)}function DeselectAll(colIndex){$(“#grdView tr”).each(function(){$(this).children(0).eq(colIndex).children(0).attr(‘checked’,false)})}});
</script>
</head>
<body>
<table id=grdView><tr><td><input type=checkbox id=checkall0 /></td><td><input type=checkbox id=checkall1 /></td><td>Description</td></tr><tr><td><input type=checkbox id=grdView11 /></td><td><input type=checkbox id=grdView21 /></td><td>Desc 1</td></tr><tr><td><input type=checkbox id=grdView12 /></td><td><input type=checkbox id=grdView22 /></td><td>Desc 2</td></tr><tr><td><input type=checkbox id=grdView13 /></td><td><input type=checkbox id=grdView23 /></td><td>Desc 3</td></tr><tr><td><input type=checkbox id=grdView14 /></td><td><input type=checkbox id=grdView24 /></td><td>Desc 4</td></tr><tr><td><input type=checkbox id=grdView15 /></td><td><input type=checkbox id=grdView25 /></td><td>Desc 5</td></tr><tr><td><input type=checkbox id=grdView16 /></td><td><input type=checkbox id=grdView26 /></td><td>Desc 6</td></tr></table>
</body></html>
The above page has a table with the first two columns being the mutually exclusive checkboxes and the third with some junk content. The header checkbox in the first and second columns have ‘Select All’ functionality. Also, they act as mutually exclusive within a row. Code also selects the header checkbox, if all its child checkboxes (in its column) are selected.
Hoping it was useful.
The Relentless FrontEnd - Aackose Lal's Blog 