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>

Answer 2

不要使用任意数量的.parent方法进行链接，只需使用.parentsUntil('.edit-container')：

$('.edit-container input[type="checkbox"]').change(function() {

    var container=$(this).parentsUntil('.edit-container'); // changed this line here
    
    if(container.find('#a1:checked,#a2:checked').length===2) { // use triple equals, not double
        container.css('background','red');
    } else {
        container.css('background','');        
    }
});

.edit-container2 {width:100px; height:100px; }
.edit-container { 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>

Answer 3

我认为这可以解决您的问题。

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

  if ($('#a1').is(':checked') && $('#a2').is(':checked')) {
    container.css('background', 'red')
  } else {
    container.css('background', '');
  }

});

检查两个复选框时背景颜色如何变化

3 个答案: