Question

昨天我发布了一个类似的问题，但这是一个新问题。

我在页面上动态创建了复选框。 On是父复选框，其余是子复选框。每个子复选框都包含在<div>中。我有一个下拉列表。当我从列表中选择一个项目时，选中或取消选中复选框。当复选框状态发生变化时，<div>将包裹背景颜色或当我选中或取消选中它时。

我的问题。当我选中/取消选中父复选框时，它还会检查/取消选中子复选框，但子复选框'<div>的背景颜色不会更改。

我需要它仍然可以正常工作，但也可以根据需要使用新功能。

我的代码：

1。 CSS：

<style>

div.sch_cal_row {
    margin-top: 0px;
    margin-left: 0px;
    width: 300px;
    border-radius: 3px;
    border-color: white;
    height: 20px;
}


div.highlight {
    width: 300px;
    height: 20px;
    background-color: #78EF5A;
    /*background-color: #E0FBD9;*/
    /*background-color: green;*/
}
div.high1 {
    width: 300px;
    height: 20px;
    background-color: #F24F40;
    /*background-color: #FFA07A;*/
    /*background-color: red;*/
}

div.available {
    width: 100px;
    height: 46px;
    background-color: #A8A69C;
}
</style>

2。 JS：

<script type="text/javascript">
$(".childChk").each(function(){
    check($(this));
});
$(".childChk").click(function () {
    check($(this));
});

function check(chkElem) {
    if (chkElem.is(':checked')) {
        chkElem.parent().removeClass();
        chkElem.parent().addClass("highlight");
    } else {
        chkElem.parent().removeClass("highlight");
        chkElem.parent().addClass("high1");
    }
}
</script>

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

根据评论更新：

<input class="parentChk" data-val="true" data-val-required="The AllChecked field is required." id="4" name="Categories[0].AllChecked" type="checkbox" value="true">
<input name="Categories[0].AllChecked" type="hidden" value="false">
<input id="Categories_0__CategoryName" name="Categories[0].CategoryName" type="hidden" value="Account">
<strong>Account</strong>
<br>
    <div class="sch_cal_row high1">
        <input data-val="true" data-val-number="The field PrivilegeID must be a number." data-val-required="The PrivilegeID field is required." id="Categories_0__Privileges_0__PrivilegeID" name="Categories[0].Privileges[0].PrivilegeID" type="hidden" value="8">
        <input id="Categories_0__Privileges_0__PrivilegeName" name="Categories[0].Privileges[0].PrivilegeName" type="hidden" value="AccountAddEdit">
        <input class="childChk" data-val="true" data-val-required="The Checked field is required." id="Categories_0__Privileges_0__Checked" name="Categories[0].Privileges[0].Checked" type="checkbox" value="true"><input name="Categories[0].Privileges[0].Checked" type="hidden" value="false">
    &nbsp;AccountAddEdit<br>
    </div>

这只是父母和一个孩子。

Answer 1

您在document.ready

中修改了javascript代码

     $(document).ready(function(e) {
       $(".childChk").each(function(){
         check($(this));
       });
       $(".childChk").click(function () {
         check($(this));
       });
    });
   function check(chkElem) {
     if (chkElem.is(':checked')) {
       chkElem.parent().removeClass();
       chkElem.parent().addClass("highlight");
     } else {
       chkElem.parent().removeClass("highlight");
       chkElem.parent().addClass("high1");
     }
   }

Answer 2

试试这段代码......

$('.childChk').on("click", function(){
        var thisParent = $(this).parent();
        if(thisParent.hasClass("highlight")) {
           thisParent.removeClass("highlight")
        } else {
           thisParent.addClass("highlight")
        }                
    });

更改复选框上的<div>背景检查</div>

2 个答案: