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>
Feel free to get back to me in case of any issues.
