jquery中checkbox使用方法简单实例演示


Posted in Javascript onNovember 24, 2015

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

jquery中checkbox使用方法简单实例演示

引入jquery库
<script src="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); 
 } 
}

通过本文希望大家对jquery中checkbox的使用方法有个大概的认识,再通过大量实例熟练掌握checkbox使用方法。

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
javascript表单事件处理方法详解
May 15 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue-cli随机生成port源码的方法
Sep 02 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 #Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 #Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
You might like
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
JavaScript this 深入理解
2009/07/30 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
python中os包的用法
2020/06/01 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
运动会通讯稿150字
2014/02/15 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
国庆节新闻稿
2015/07/17 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL