html 复选框 labei,javascript - @Html.CheckBoxFor() - Change Check Box Label Color

I have dynamically created checkboxes.

@for (var i = 0; i < Model.Categories.Count; i++)

{

@Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })

@Html.HiddenFor(m => Model.Categories[i].CategoryName)

@Model.Categories[i].CategoryName

@*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@

@for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)

{

@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeID)

@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeName)

@Html.CheckBoxFor(m => Model.Categories[i].Privileges[p].Checked, new { @class = "childChk" })

@Html.JTDisplayTextFor(m => Model.Categories[i].Privileges[p].PrivilegeName, "")

}

What I need to do is:

When the page loads some of the check boxes are going to be checked and some not. If I uncheck a check box it should change the check box label background to red and if I check a check box that was not checked it should change the check box label background to green.

Can any one help me please?

Edit:

This is the Html of one of the generated checkboxes:

EDIT:

1. CSS:

div.sch_cal_row {

margin-top: 0px;

margin-left: 0px;

width: 300px;

border-radius: 3px;

height: 20px;

}

div.highlight {

width: 300px;

height: 20px;

background-color: #E0FBD9;

}

div.high1 {

width: 300px;

height: 20px;

background-color: #FFA07A;

}

div.available {

width: 100px;

height: 46px;

background-color: #A8A69C;

}

2. JS:

$(".childChk").click(function () {

if ($(this).is(':checked')) {

$(this).parent().removeClass();

$(this).parent().addClass("highlight");

} else {

$(this).parent().removeClass("highlight");

$(this).parent().addClass("high1");

}

});

3. Html/Razor:

@for (var i = 0; i < Model.Categories.Count; i++)

{

@Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })

@Html.HiddenFor(m => Model.Categories[i].CategoryName)

@Model.Categories[i].CategoryName

@*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@

@for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)

{

@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeID)

@Html.HiddenFor(m => Model.Categories[i].Privileges[p].PrivilegeName)

@Html.CheckBoxFor(m => Model.Categories[i].Privileges[p].Checked, new { @class = "childChk" })

@Html.JTDisplayTextFor(m => Model.Categories[i].Privileges[p].PrivilegeName, "")

}

I have the above code that changes the parrent div background color when you click on the check box. But what I also need is:

On load or when a option from a drop down menu is changed the check state of some of the boxes changes. I need to get the function to change the colour of the divs when the check state is automatically changed by selecting another item from the drop down menu