jQuery实现全选反选效果

有时候，我们对一些列表操作经常需要全选，反选功能。例如博客里文章列表，我们可以全选或反选后可以对选中的文章进行删除，下线，移动，复制等操作。下面直接贴出例子代码

jQuery code

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

// 琼台博客 www.qttc.net

// 当文档加载完后      
$(document).ready(function(){
  // 给全选框加上动作    
  $(":checkbox[value='全选']").click(function(){
    // 获取全部标签
    $ul = $('ul li :checkbox');
    // 判断勾选还是取消
    if($(this).is(':checked')){
      // 如果勾选则全部选项选上            
      $ul.each(function(){
        $(this).attr('checked',true);
      });    
    }else{
      // 如果取消则全部选项取消            
      $ul.each(function(){
        $(this).attr('checked',false);
      });        
    }            
  });

  // 给反选框加上动作
  $(":checkbox[value='反选']").click(function(){
    // 获取全部标签
    $ul = $('ul li :checkbox');

    $ul.each(function(){
      // 判断是否已经勾选
      if($(this).is(':checked')){
        // 如果已经勾选则取消
        $(this).attr('checked',false);
      }else{
        // 如果未勾选则选上    
        $(this).attr('checked',true);    
      }
    });                
  });

  // 给每个多选框加入动作
  $('ul li :checkbox').click(function(){
    // 获取未选标签
    $ul = $('ul li :checkbox:not(:checked)');
    // 判断是否有元素
    if($ul.length){
      // 如果有未选则取消全选框勾选状态    
      $(":checkbox[value='全选']").attr('checked',false);
    }else{
      // 如果没有则自动勾选上全选框状态    
      $(":checkbox[value='全选']").attr('checked',true);
    }
  });
});

HTML Code

<h1>全选/单选实现效果</h1>
 
<ul>
  <li>
    <input type="checkbox" />多选框1
  </li>
  <li>
    <input type="checkbox" />多选框2
  </li>
  <li>
    <input type="checkbox" />多选框3
  </li>
  <li>
    <input type="checkbox" />多选框4
  </li>
  <li>
    <input type="checkbox" />多选框5
  </li>
  <li>
    <input type="checkbox" />多选框6
  </li>
  <li>
    <input type="checkbox" />多选框7
  </li>
</ul>
 
<p>
  <input type="checkbox" value="全选" />全选
  <input type="checkbox" value="反选" />反选
</p>