jQuery show based on checkbox value at page load.
- by Jacob Huggart
I have an ASP MVC web app and on one of the pages there is a set of Main checkboxes with sub-checkboxes underneath them. The sub-checkboxes should only show up when the corresponding main checkbox is checked. I have the following code that works just fine as long as none of the checkboxes are checked when the page loads.
$("input[id$=Suffix]").change(function() {
prefix = this.id;
if (!$(this).hasClass("checked")) {
$("tr[id^=" + prefix + "]").show();
$(this).addClass("checked");
}
else {
$("tr[id^=" + prefix + "]").hide();
$(this).removeClass("checked");
}
});
Now I need to check a database for the values of the main checkboxes. I get the values, and can check the boxes on page load. But when the page comes up, the sub-checkboxes are not displayed when the main checkbox is checked.
Also, if the main checkbox is checked when the page loads, the sub-checkboxes are only displayed when the main chcekbox is unchecked (obviously because the above function only acts on .change()).
What do you all suggest I try? If you need further explanation feel free to ask.
edit: btw, all of this is in $(document).ready()
