jquery实现简单的全选和反选功能


Posted in Javascript onJanuary 02, 2016

首先我们看个简单的实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

下面再给大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者。

引入jquery库

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

构建HTML

一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,实现复选框checkbox的全选与不选,先建立html

<ul id="list">  
  <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
  <li><label><input type="checkbox" value="2"> 2.哈哈,真的太天真了</label></li> 
  <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗?</label></li> 
  <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
  <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
  <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">  
<input type="button" value="全不选" class="btn" id="unSelect">  
<input type="button" value="反选" class="btn" id="reverse">  
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

jQuery 代码

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时,列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){  
  if(this.checked){  
    $("#list :checkbox").attr("checked", true);  
  }else{  
    $("#list :checkbox").attr("checked", false); 
  }  
});

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时,列表中所有的选项都会被选中,包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () { 
  $("#list :checkbox,#all").attr("checked", true);  
});

3、全不选。当点击全不选按钮#unSelect时,列表中所有的选项都是未选中状态,当然包括#all也是未选中状态。

$("#unSelect").click(function () {  
  $("#list :checkbox,#all").attr("checked", false);  
});

4、反选。当点击反选按钮#reverse,列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态,当然也要注意#all的状态。

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () {  
    $(this).attr("checked", !$(this).attr("checked"));  
  }); 
  allchk(); 
});

代码中遍历了选项列表,然后改变checked属性,最后调用函数allchk(),后面将介绍该函数。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历数组,将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串,开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
    valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(',');//转换为逗号隔开的字符串 
  alert(vals); 
});

为了完善选中选项功能,我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件,则#all也要相应的变为选中状态,同样,如果事先所有的选项是选中状态时,当取消勾选某个选项时,那么#all也要相应的变为未选中状态。

//设置全选复选框 
$("#list :checkbox").click(function(){ 
  allchk(); 
});

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的,请看代码。

function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

总结

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

$(function () { 
  //全选或全不选 
  $("#all").click(function(){  
    if(this.checked){  
      $("#list :checkbox").attr("checked", true);  
    }else{  
      $("#list :checkbox").attr("checked", false); 
    }  
   }); 
  //全选  
  $("#selectAll").click(function () { 
     $("#list :checkbox,#all").attr("checked", true);  
  });  
  //全不选 
  $("#unSelect").click(function () {  
     $("#list :checkbox,#all").attr("checked", false);  
  });  
  //反选 
  $("#reverse").click(function () { 
     $("#list :checkbox").each(function () {  
       $(this).attr("checked", !$(this).attr("checked"));  
     }); 
     allchk(); 
  }); 
   
  //设置全选复选框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 
  
  //获取选中选项的值 
  $("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
      valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(','); 
     alert(vals); 
  }); 
}); 
function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}
Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS请求servlet功能示例
Jun 01 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
基于Javascript实现弹出页面效果
Jan 01 #Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 #Javascript
基于jQuery实现返回顶部实例代码
Jan 01 #Javascript
详解JavaScript 中的 replace 方法
Jan 01 #Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 #Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
You might like
php中变量及部分适用方法
2008/03/27 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
python中__call__方法示例分析
2014/10/11 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
医学生自荐信
2013/12/03 职场文书
三年级科学教学反思
2014/01/29 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
应聘教师求职信
2014/07/19 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书