javascript - 选中两个复选框时背景颜色如何变化

Question

我正在做一个元素。我希望在选中两个复选框时改变背景颜色。我尝试了下面的代码但失败了。当我们删除“edit-container2”时，我看到代码正在工作，但我不想要它。我希望 Javascript 代码可以在不同的 div 上工作。 (不同的示例，CSS Body 背景改变颜色。)我该如何实现该解决方案？

重要提示:代码必须是 JavaScript。这可能吗？

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

.edit-container2 {width:100px; height:100px; }
.edit-container { width:200px; height:200px;}

    <div class="edit-container">
      
          
        <div class="edit-container2">
        <input type="checkbox" id="a1" />
        <input type="checkbox" id="a2" />
        </div>
    
    </div>

Jsfiddle:http://jsfiddle.net/3DPLd/17/

Answer 1

您正在寻找错误的家长。首先获取 .edit-container2，然后获取 .edit-container。

检查一下。

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

.edit-container2 {width:100px; height:100px; background:green;}
.edit-container {background:blue; width:200px; height:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-container">
      
          
        <div class="edit-container2">
        <input type="checkbox" id="a1" />
        <input type="checkbox" id="a2" />
        </div>
    
    </div>