Question

这看起来很简单，但我没有让它发挥作用。我正在尝试验证是否在某个div内检查了两个复选框。如果是，请将背景设为红色。我意识到我设置它的方式，所有div和类edit-container都会显示为红色。我还没想出如何将其缓存为复选框的父div。

<form action="">
<div class="dropdown-menu">
    <p class="edit-title">Edit Preferences</p>
    <div class="edit-container">
        <label for="">Yes</label>
        <input type="checkbox" class="check1" />
        <label for="">No</label>
        <input type="checkbox" class="check2" />
    </div>
    <div class="edit-container">
        <label for="">Yes</label>
        <input type="checkbox" class="check1" />
        <label for="">No</label>
        <input type="checkbox" class="check2" />
    </div>
</div>

$('.edit-container input[type="checkbox"]').change(function() {
    if (('.check1:checked,.check2:checked').length === 2) {
        $('.edit-container').css("background-color", "red");
    }
});

Answer 1

$('.edit-container input[type="checkbox"]').change(function () {
    if ($(this).closest('.edit-container').removeClass('red').find('input[type="checkbox"]:checked').length === 2) $(this).closest('.edit-container').addClass('red');
});

<强> jsFiddle example

由于Madbreaks不喜欢我的答案，我会解释它。单击任何复选框后，将从父（.edit-container）div中删除一个类（例如红色）。然后对已检查的子输入进行计数，如果有两个，则将一个类（红色）添加到父div。

Answer 2

您在IF子句的真实部分中缺少jQuery选择器语句的$。我为它创建了一个小提琴，修复并处理它以便在其中一个未经检查时恢复。

http://jsfiddle.net/3DPLd/2/

$('.edit-container input[type="checkbox"]').change(function() {
    var container=$(this).parent('.edit-container');

    if(container.find('.check1:checked,.check2:checked').length==2)
        container.css('background','red');
    else
        container.css('background','');        
});

Answer 3

您在$声明中遗漏了if。

要更改父div的bg颜色，请更改

$('.edit-container').css("background-color", "red");

到

$(this).parent().css('background-color', 'red');

更好的是，在元素上切换class而不是设置（邪恶的）内联样式。

不要在选择器中使用硬编码类，只需在父级中查找:checked个复选框：

$('.edit-container input[type="checkbox"]').change(function() {
    var $parent = $(this).parent();
    if($parent.find(':checked') == 2)
        $parent.css('background-color', 'red');
});

如果选中两个复选框 - 更改背景颜色

3 个答案: