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拖动改变div大小
Jul 04 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery实现手风琴特效
Jan 11 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
js中url对象化管理分析
2017/12/29 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python中eval与int的区别浅析
2019/08/11 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
幼儿园教师教育感言
2014/02/28 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
施工安全标语
2014/06/07 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
文明礼貌主题班会
2015/08/14 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python