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 /剃刀：

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

我有上面的代码，当您单击复选框时更改parrent 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

Answer 2

用于页面加载

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

  });

});

Answer 3

请考虑以下事项：

这应该适用于大多数html，包括通过助手的MVC3 / 4/5生成的HTML：）

$('input[type=checkbox]').each(function(){
   if(this.checked==true){           
   $(this).prev('label').css('color','red');
}
else
{
   $(this).prev('label').css('color','green');
}
});

$('input[type=checkbox]').click(function(){
    if(this.checked==true)
{
    $(this).prev('label').css('color','red');
 }
 else
 {
    $(this).prev('label').css('color','green');
 }
 });

http://jsfiddle.net/7uhWc/

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

3 个答案: