Introduction
I needed a script to check/uncheck all items in a CheckBoxList
in a GridView
, but all the search led to the use of two controls, one for Select All and the other for the List
itself.
Using the Code
I'll assume that the CheckBoxList
already has its items. We will add an attribute to each checkbox
in the CheckBoxList
.
C#
foreach (ListItem item in chkList.Items)
{
item.Attributes.Add("onclick", "CheckStatus(this)");
item.Selected = true;
}
JavaScript
function CheckStatus(chk) {
$(document).ready(
function () {
var chkList = $($(chk).parents('table')).first();
var firstCHK = $(chkList).find(':checkbox').first();
var txtControl = $($(chkList).parents('div').first().
parents('td').first().find(':text')).first();
var txt = '';
if ($(firstCHK).attr('value') == 0) {
if ($(firstCHK).attr('value') == $(chk).attr('value')) {
$(chkList).find(':checkbox').each(function () {
this.checked = $(firstCHK).is(':checked');
});
if ($(firstCHK).is(':checked')) {
txt = 'All';
}
else {
txt = 'None';
}
}
else {
var countAll = $($(chkList).find(':checkbox')).length;
var countFalse = 0;
var countTrue = 0;
if ($(chk).is(':checked') == false) {
$(firstCHK).attr('checked', false);
}
else {
var flag = true;
$(chkList).find(':checkbox').each(function () {
if (this.checked == false && this.value != 0)
flag = false;
});
$(firstCHK).prop('checked', flag);
}
$(chkList).find(':checkbox').each(function () {
if (this.checked == false && this.value != 0)
countFalse += 1;
else if (this.checked && this.value != 0)
countTrue += 1;
});
if (countFalse == countAll - 1)
txt = 'None';
else if (countTrue == countAll - 1)
txt = 'All';
else {
$(chkList).find(':checkbox').each(function () {
if (this.checked && this.value != 0)
txt = txt.length == 0 ? $('label[for=' +
this.id + ']').html() : txt + ',' +
$('label[for=' + this.id + ']').html();
});
}
}
}
$(txtControl).val(txt);
$(txtControl).prop('title', txt);
});
}
Update
I have updated the JavaScript to write the selected Checkbox
names in the TextBox
.