分享一段基于jQuery实现复选框列表全选、反选、不选功能的代码，适用于网页多选后需要批量操作的场景(如批量删除等)。).结合实例，代码简洁，基本涵盖了选项选择操作的方方面面，希望对有需要的前端开发爱好者有所帮助。

引入jquery库脚本src=' http : Ajax/libs/jquery/1 . 10 . 2/jquery . min . js '/脚本构建HTML。

通常，从数据库中读取的列表需要批量选择，以便删除和编辑等。现在，让我们模拟复选框的整个选择和不选择，并首先建立html。

ul id=' list ' lilabelinput type=' checkbox ' value=' 1 ' 1。我录制了它/label/Li lilabelinput type=' checkbox ' value=' 2 ' 2。哈哈，真幼稚/label/Li lilabelinput type=' checkbox ' value=' 3。/label/Li Li belinput type=' checkbox ' value=' 4 ' 4。你永远不应该从一开始就爱上我/label/Li lilabelinput type=' checkbox ' value=' 5 ' 5。很难喜欢上某人/标签/李标签输入类型=' checkbox '值=' 6' 6。你在哪里/label/li/Ul输入类型=' checkbox' id=' all '输入类型=' button '值=' select all ' class=' BTN ' id=' select all '输入类型=' button '值=' select none ' class=' BTN ' id=' unselect ' I . Nput类型='button '值=' reverse selection ' class=' BTN ' id=' reverse ' input type=' button '值=' get all selected value ' class=' BTN ' id=' getValue ' jquery code。

1.选择全部或无。当“全选”按钮旁边的复选框“全部”被选中时，列表中的所有选项都将被选中，否则，列表中的所有选项都将被取消选中。

$('#all ')。单击(function(){ if(this . checking){ $(' # list : checkbox ')。attr('checked '，true)；}else{ $('#list :checkbox ')。attr('checked '，false)；} });2.全选。当您单击全选按钮#全选或选中全选按钮旁边的复选框#all时，列表中的所有选项都将被选中，包括全选旁边的复选框。

$('#selectAll ')。单击(function(){ $(' # list : checkbox，#all ')。attr('checked '，true)；});3.完全不要选择。当您单击#取消全选按钮时，列表中的所有选项都将取消选择，包括#all。

$('#unSelect ')。单击(function(){ $(' # list : checkbox，#all ')。attr('checked '，false)；});4.反选举。当您单击#reverse按钮时，列表中所有选中的项目都将被取消选中，所有未选中的项目都将被选中。当然，你也要注意#all的状态。

$('#reverse ')。单击(function(){ $(' # list : checkbox ')。每个(函数(){ $(this))。attr('选中'，$(这个)。attr('选中')；});all chk()；});代码遍历选项列表，然后更改选中的属性，最后调用函数allchk()，这将在后面介绍。

5.获取所有选定的值。如果我们想与后台程序交互，我们必须获取列表中所选项的值。我们遍历数组，将选中项的值存储在数组中，最后形成一个用逗号(，)分隔的字符串，这样开发人员就可以通过获取这个字符串来执行相应的操作。

$('#getValue ')。单击(function(){ var valArr=new Array；$(“# list : checkbox[选中]”)。每个(函数(i){ valArr[i]=$(this)。val()；});var vals=valArr.join('，')；//转换为逗号分隔的字符串alert(val)；});为了改进选中选项功能，当我们点击列表中的一个选项时，如果选中的项目刚好满足所有选中条件，#all将相应地被选中。同样，如果提前选择了所有选项，当某个选项未选中时，#all将相应地变为未选中。

//为所有$ ('# list:checkbox ')设置复选框。click(function(){ all chk()；});函数allchk()用于检测是否应该选中或取消选中全选框#all。请查看代码。

函数all chk(){ var chknum=$(' # list : checkbox ').size()；//选项总个数var chk=0；$(“# list : checkbox”).每个（函数(){ if($(this)).attr(' checked ')==true){ chk；} });if(chknum==chk){//全选$('#all ').attr('checked '，true)；}else{//不全选$('#all ').attr('checked '，false)；} }总结

jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"已检查"属性的值，真的未选中，假的为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。以下我将所有jQuery代码整理在一起，供大家参考。

$(function () { //全选或全不选$('#all ').单击(function(){ if(this。选中){ $(' # list :复选框').attr('checked '，true)；}else{ $('#list :checkbox ').attr('checked '，false)；} });//全选$('#selectAll ').单击(function(){ $(' # list :复选框，#all ').attr('checked '，true)；});//全不选$('#unSelect ').单击(function(){ $(' # list :复选框，#all ').attr('checked '，false)；});//反选$('#reverse ').单击(function(){ $(' # list : checkbox ').每个（函数(){ $(此)).attr('选中',$(这个)。attr('选中');});all chk()；});//设置全选复选框$(“# list : checkbox”).单击(function(){ all chk()；});//获取选中选项的值$('#getValue ').单击(函数(){ var valArr=new Array$("# list :复选框[选中]")。每个（函数(一){ valArr[i]=$(这个).val()；});var vals=valArr.join('，')；警报(val })；});函数all chk(){ var chknum=$(' # list : checkbox ').size()；//选项总个数var chk=0；$(“# list : checkbox”).每个（函数(){ if($(this)).attr(' checked ')==true){ chk；} });if(chknum==chk){//全选$('#all ').attr('checked '，true)；}else{//不全选$('#all ').attr('checked '，false)；} }通过本文希望大家对jquery中检验盒的使用方法有个大概的认识，再通过大量实例熟练掌握检验盒使用方法。