jQuery实现全选、反选和不选功能


Posted in jQuery onAugust 16, 2017

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

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").prop("checked", true); 
  }else{  
  $("#list :checkbox").prop("checked", false);
  }  
});

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

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

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

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

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

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () { 
    $(this).prop("checked", !$(this).prop("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).prop("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全选
    $("#all").prop("checked",true);
  }else{//不全选
    $("#all").prop("checked",false);
  }
}

总结

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

$(function () {
 //全选或全不选
 $("#all").click(function(){ 
  if(this.checked){ 
   $("#list :checkbox").prop("checked", true); 
  }else{ 
  $("#list :checkbox").prop("checked", false);
  } 
  }); 
 //全选 
 $("#selectAll").click(function () {
   $("#list :checkbox,#all").prop("checked", true); 
 }); 
 //全不选
 $("#unSelect").click(function () { 
   $("#list :checkbox,#all").prop("checked", false); 
 }); 
 //反选 
 $("#reverse").click(function () { 
   $("#list :checkbox").each(function () { 
    $(this).prop("checked", !$(this).prop("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).prop("checked")==true){
   chk++;
  }
 });
 if(chknum==chk){//全选
  $("#all").prop("checked",true);
 }else{//不全选
  $("#all").prop("checked",false);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
You might like
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Web开发之JavaScript
2012/03/29 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
创立科技Java面试题
2015/11/29 面试题
企业领导对照检查材料
2014/08/20 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
介绍信的格式
2015/01/30 职场文书
售后服务质量承诺书
2015/04/29 职场文书
关于幸福的感言
2015/08/03 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL