Question

我在<input type='checkbox'>内有li的简单列表。其中很少是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>

如何将.transparent类添加到包含li且未选中的<input type='checkbox'>，并在用户将<input type='checkbox'>标记为checked时删除此类？

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

Answer 1

可以使用一些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

＆＃13;

$(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');
});

＆＃13;

.transparent{
 color:red;
}

＆＃13;

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

＆＃13;

Answer 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>

在单击复选框

3 个答案: