Javascript @Html.CheckBoxFor（）-更改复选框标签颜色

我已经动态创建了复选框

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

@对于（var i=0；iModel.Categories[i].AllChecked，新的{id=Model.Categories[i].categoriid，@class=“parentChk”}）
@Html.HiddenFor（m=>Model.Categories[i].CategoryName）
@Model.Categories[i].CategoryName


@*@Html.JTDisplayTextFor（m=>Model.Categories[i].CategoryName，“”）*@
@对于（var p=0；pModel.Categories[i].Privileges[p].PrivilegeID）
@Html.HiddenFor（m=>Model.Categories[i].Privileges[p].privilegeneame）
@（m=>Model.Categories[i].Privileges[p].Checked，new{@class=“childChk”}）
@Html.JTDisplayTextFor（m=>Model.Categories[i].Privileges[p].privilegeneName，”）
}


}

我需要做的是：

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

有人能帮我吗

编辑：

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

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

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

这是其中一个生成复选框的Html:

编辑：

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

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

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

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

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

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

分区Schu_cal_row{
边际上限：0px；
左边距：0px；
宽度：300px；
边界半径：3px；
高度：20px；
}
分区突出显示{
宽度：300px；
高度：20px；
背景色：#E0FBD9；
}
分区高1{
宽度：300px；
高度：20px；
背景色：#FFA07A；
}
分区可用{
宽度：100px；
高度：46px；
背景色：#A8A69C；
}

2。JS:

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

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

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

$（“.childChk”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this.parent（）.removeClass（）；
$（this.parent（）.addClass（“highlight”）；
}否则{
$（this.parent（）.removeClass（“highlight”）；
$（this.parent（）.addClass（“high1”）；
}
});

3。Html/Razor:

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

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

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

@对于（var i=0；iModel.Categories[i].AllChecked，新的{id=Model.Categories[i].categoriid，@class=“parentChk”}）
@Html.HiddenFor（m=>Model.Categories[i].CategoryName）
@Model.Categories[i].CategoryName


@*@Html.JTDisplayTextFor（m=>Model.Categories[i].CategoryName，“”）*@
@对于（var p=0；pModel.Categories[i].Privileges[p].PrivilegeID）
@Html.HiddenFor（m=>Model.Categories[i].Privileges[p].privilegeneame）
@（m=>Model.Categories[i].Privileges[p].Checked，new{@class=“childChk”}）
@Html.JTDisplayTextFor（m=>Model.Categories[i].Privileges[p].privilegeneName，”）
}


}

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

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

$(document).ready(function(){

 $('.childChk').each(function(){

   if(this.checked==true){    
      $(this).toggleClass("green");
   }

 });

 //Whenever you click a check box

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

    if(this.checked==true){

      $(this).toggleClass("green");
    }

  });

});

---

根据我们的长期讨论，以下是解决方案：
HTML

JS代码

---

请考虑以下内容：

这应该适用于大多数html，包括通过帮助程序生成的MVC3/4/5 html:）

---

您有两个不同的复选框。您想要哪一个？子复选框（第二个）和

红色

类在哪里？@Pavlo默认为红色，切换绿色将覆盖redop，正如页面加载时所说的，一些复选框将被选中，而另一些则不被选中。那么什么时候应该使用

red

作为默认值呢？我需要一种不使用额外标签的方法。我在开头给出的代码是用于创建复选框的Html

@Html.CheckBoxFor（）

是一个MVC HtmlHelper开关，为复选框生成所有内容。我需要使用JS更改复选框背景颜色的文本标签，而不更改我提供的任何代码。我已经找到一个可能的解决方案，使用类似于您所做的操作。我将更新我的问题，然后你可以看到。我只需要稍微调整一下，效果很好。我只需要稍微改进一下。现在发生的是。当它加载时，没有复选框，所以每个东西都是红色的，然后当我选择一个选项时，它会相应地改变。但我现在需要做的是：当它加载时，在我选择第一个选项之前，背景不能改变。很抱歉我说的不清楚，但我的指示也相应地更新了。@Hydro你是在说这样的事情吗？是的，这正是我需要的这是我的第一个答案，而这不是OP真正需要的