Change function to take in class name
I have a page that produces the following html.
Check all checkbox html:
<span class="chkHeader2"><input id="CPH1_dlYear_cbCheckAll" type="checkbox" name="ctl00$CPH1$dlYear$ctl00$cbCheckAll" checked="checked" /></span>
Check box controls being produced by my page:
<span class="chkItem2"><input id="CPH1_dlYear_chkYear_0" type="checkbox" name="ctl00$CPH1$dlYear$ctl01$chkYear" checked="checked" /></span>
<span class="chkItem2"><input id="CPH1_dlYear_chkYear_1" type="checkbox" name="ctl00$CPH1$dlYear$ctl02$chkYear" checked="checked" /></span>
I have multiple sets of this within my page with different class names. ex. I have chkItem1, chkItem3 and the same with the chkHearder class.
I have this jquery function and want to know if it is possible to use this one function for all 3 sets of checkboxes? I want each set to check all of their specific set of checkboxes not ones from any other set.
- <script type="text/javascript">
$(window).bind('load', function () {
var headerChk = $(".chkHeader input");
var itemChk = $(".chkItem input");
headerChk.bind("click", function () {
itemChk.each(function () {
this.checked = headerChk[0].checked;
})
});
var flag = false;
itemChk.bind("click", function () {
itemChk.each(function () {
if (this.checked == false) {
flag = false;
return false;
}
else
flag = true;
})
headerChk[0].checked = flag;
});
});
//same version for partial postback
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (sender, args) {
var headerChk = $(".chkHeader input");
var itemChk = $(".chkItem input");
headerChk.bind("click", function () {
itemChk.each(function () {
this.checked = headerChk[0].checked;
})
});
var flag = false;
itemChk.bind("click", function () {
itemChk.each(function () {
if (this.checked == false) {
flag = false;
return false;
}
else
flag = true;
})
headerChk[0].checked = flag;
});
});
</script>
Thank you