单击复选框时向父元素添加/删除类答案

【问题标题】：Adding/removing class to parent element while clicking on checkbox单击复选框时向父元素添加/删除类
【发布时间】：2018-01-21 03:26:45
【问题描述】：

我有一个简单的列表，每个li 里面都有<input type='checkbox'>。他们中很少有人是checked 和其他人不是

<ul>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
</ul>

当用户将<input type='checkbox'> 标记为checked 时，如何将类.transparent 添加到那些包含<input type='checkbox'> 的li 并删除该类？

主要问题是我想添加/删除此类 (1) 在页面加载时 (2) 稍后在用户单击我的列表中的某些内容时更改它。

【问题讨论】：

进行了编辑...我认为这些盒子带有 transparent 的类。

标签： jquery css checkbox input

【解决方案1】：

$(document).ready(function(){

// (1) when page is loading
   $("li").each(function(index) {    if($(this).find('input[type="checkbox"]').is(':checked')){
         $(this).addClass('transparent');
     }
   });
   
});


//(2) change it later while user will click something on my list.


$(document).on('change',"ul li input[type=checkbox]",function(){
    $(this).parent().toggleClass('transparent');
});

.transparent{
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
</ul>

【讨论】：

谢谢！这正是（几乎）我所需要的！

【解决方案2】：

可以用一些 JavaScript 来完成：

function formatCheckboxes(){
  jQuery('li').each(function( index ) {
    jQuery(this).addClass('transparent');
    jQuery(this).has('input:checked').removeClass('transparent');
  });
}
jQuery(document).ready(function(){
  formatCheckboxes();
});
jQuery(document).on('change','input[type="checkbox"]', function(){ 
  formatCheckboxes(); 
});

.transparent{
  opacity:0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
<li><input type='checkbox' checked></li>
<li><input type='checkbox'></li>
</ul>

【讨论】：

【解决方案3】：

遍历每个复选框并检查它们是否被选中/取消选中，并在此基础上将 transparent 类添加到父 li：

$(document).ready(function() {
  $('input[type="checkbox"]:checked').each(function() {
    $(this).parent().addClass('transparent');
  });
});

$('input[type=checkbox]').on('change', function() {
  $(this).parent().toggleClass('transparent');
});

.transparent {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type='checkbox' checked></li>
  <li><input type='checkbox'></li>
  <li><input type='checkbox' checked></li>
  <li><input type='checkbox'></li>
</ul>

【讨论】：