选中两个复选框时背景颜色如何变化答案

【问题标题】：How the Background Color Changes When Two Checkboxes are Checked选中两个复选框时背景颜色如何变化
【发布时间】：2018-03-08 13:16:21
【问题描述】：

我正在做一个项目。我希望在选中两个复选框时更改背景颜色。我尝试了下面的代码，但失败了。当我们删除它“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/

【问题讨论】：

标签： javascript html css checkbox

【解决方案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>

【讨论】：

谢谢！我想知道如何在此代码上使用 localStorage？我尝试了所有方法，但我做不到。

【解决方案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>

【讨论】：

成功了，谢谢。我想知道如何在此代码上使用 localStorage？我想要 If container.css('background','red') 这个活动被保存。

【解决方案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', '');
  }

});

【讨论】：