Question

我有这个HTML

<div class="bot">
    <span class="k-checkbox" role="presentation">
        <div class="icheckbox_minimal-blue checked">
        </div>
    </span>
</div>
<div class="bot">
    <span class="k-checkbox" role="presentation">
        <div class="icheckbox_minimal-blue">
        </div>
    </span>
</div>

我需要的是当icheckbox_minimal-blue类具有类已选中时，只需将其添加为父级新类启用这意味着当示例必须像这样

<div class="bot enable">
    <span class="k-checkbox" role="presentation">
        <div class="icheckbox_minimal-blue checked">
        </div>
    </span>
</div>
<div class="bot">
    <span class="k-checkbox" role="presentation">
        <div class="icheckbox_minimal-blue">
        </div>
    </span>
</div>

看看现在类机器人有类启用的区别吗？

Answer 1

不幸的是，单独使用CSS是不可能的，因为CSS只能选择子节点和后续兄弟节点。使用jQuery，可以使用.parent()选择器非常简单地完成此操作。

您的示例中没有提供足够的代码来模拟工作示例，因此我已经创建了自己的简单示例，您可以根据自己的需要进行调整。

$('.checkbox').change(function() {
    $(this).parent().toggleClass("enable");
});

.enable {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="checkbox" class="checkbox">
</div>

由于您使用的是div而不是标准表单控件，因此您需要在应用“enable”类的代码中触发此操作。在该代码的某个地方，尝试使用这一行（虽然很难知道如果没有看到比你在这里分享的代码更多的代码，这是否可行。）

$(this).parent().toggleClass("enable");

Answer 2

如果您希望类更改处理程序是动态的，则必须创建自定义事件并将处理程序绑定到该处理程序：

for (i = 0; i < checkBoxArray.length; i++) {
    var checkBoxItem = document.getElementsByClassName("icheck_minimal-blue")[i];
    $(checkBoxItem).on('click', function() {
        $(checkBoxItem).toggleClass("checked").trigger("classChanged");
    });

    $(checkBoxItem).on('classChanged', function() {
        $(checkBoxItem).parents().eq(1).toggleClass("enable");
    });
}

Answer 3

我不打算为你编写代码，而是指明如何实现它：

Loop through the checkboxes
Check if it's been checked，or had the required class
Find the parent
Add the class

前往写一些代码。

如果选中复选框，则向父级添加样式？

3 个答案: