javascript - @Html.CheckBoxFor() - 更改复选框标签颜色

Question

我动态创建了复选框。

<div id="Priv">
@for (var i = 0; i < Model.Categories.Count; i++)
{
    <div>
        @Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
        @Html.HiddenFor(m => Model.Categories[i].CategoryName)
        <strong>@Model.Categories[i].CategoryName</strong>
        <br />
        @*@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, "")
        }
        <br />
    </div>
}

我需要做的是:

当页面加载时，一些复选框将被选中，而另一些则不会。如果我取消选中一个复选框，它应该将复选框标签背景更改为红色，如果我选中一个未选中的复选框，它应该将复选框标签背景更改为绿色。

有人可以帮我吗？

编辑:

这是生成的复选框之一的 Html:
<input class="childChk" data-val="true" data-val-required="The Checked field is required."id="Categories_0__Privileges_1__Checked" name="Categories[0].Privileges[1].Checked" type="checkbox" value="true">

编辑:

<强>1。 CSS:

<style>

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:

<script type="text/javascript">
$(".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 :

<div id="Priv">
@for (var i = 0; i < Model.Categories.Count; i++)
{
    <div>
        @Html.CheckBoxFor(m => Model.Categories[i].AllChecked, new { id = Model.Categories[i].CategoryID, @class = "parentChk" })
        @Html.HiddenFor(m => Model.Categories[i].CategoryName)
        <strong>@Model.Categories[i].CategoryName</strong>
        <br />
        @*@Html.JTDisplayTextFor(m => Model.Categories[i].CategoryName, "")*@
        @for (var p = 0; p < Model.Categories[i].Privileges.Count; p++)
        {
             <div class="sch_cal_row">
             @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, "")
         </div>

       }
     <br />
     </div>
}
</div>

我有上面的代码，当您单击复选框时，它会更改父 div 背景颜色。但我还需要的是:

加载时或下拉菜单中的选项更改时，某些框的选中状态会更改。当检查状态自动更改时，我需要通过从下拉菜单中选择另一个元素来获得更改 div 颜色的功能

Answer 1

根据我们长时间的讨论，这里是解决方案:
HTML

<div class="sch_cal_row">
    <input type='checkbox' class="childChk" />
    <input type='checkbox' class="childChk" checked />
</div>

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;
}

JS代码

$(".childChk").click(function () {
    if($(".childChk:checked").length > 0){
        $(this).parent().removeClass().addClass("highlight");
    } else{
        $(this).parent().removeClass().addClass("high1");
    }
});

WORKING DEMO