单击复选框将类添加/删除到父元素

Question

I have simple list with <input type='checkbox'> inside every li . Few of them are checked and other not

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

How can I add class .transparent to those li that contains <input type='checkbox'> that is not checked and remove this class when user will mark <input type='checkbox'> as checked ?

The main problem is that I want to add/remove this class (1) when page is loading and (2) change it later while user will click something on my list.

Answer 1

It can be done with some 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> 

Answer 2

 $(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> 

Answer 3

Loop thru each checkboxes and check whether they are checked/unchecked and based on that add transparent class to the parent 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>