jQuery对checkbox 复选框的全选全不选反选的操作


Posted in Javascript onAugust 09, 2016

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码。

jQuery对checkbox 复选框的全选全不选反选的操作

HTML代码:

<body>
<ul id="list"> 
<li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> 
<li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li> 
<li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li> 
<li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li> 
<li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li> 
<li><label><input type="checkbox" name="items" value="6"> 6.喜欢??</label></li> 
</ul> 
<input type="checkbox" id="all"> 全选/全不选</br>
<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="获得选中的所有值" id="btn" id="getValue">
</body>

jquery代码:

<script type="text/javascript">
$(function(){
//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全选
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//全不选
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//反选
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function(){
var str="你选中的是:\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>

注:由于jquery版本的变更,新版本出现只能点击一次,老一点的版本是可以的,新的版本不可以使用attr来设置选中状态了,第一种解决方法是可以使用js原生的方法this.checked=true/false;

第二种解决方法是把attr换成prop。

以上所述是小编给大家介绍的jQuery对checkbox 复选框的全选全不选反选的操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
引用jquery框架后出错的解决方法
Aug 09 #Javascript
js实现常用排序算法
Aug 09 #Javascript
VC调用javascript的几种方法(推荐)
Aug 09 #Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 #Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 #Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 #Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 #Javascript
You might like
php 面向对象的一个例子
2011/04/12 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js 提交和设置表单的值
2008/12/19 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python与php实现分割文件代码
2017/03/06 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
C语言笔试题回忆
2015/04/02 面试题
关于Assembly命名空间的三个面试题
2015/07/23 面试题
金融行业务员的自我评价
2013/12/13 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
进步之星获奖感言
2014/02/22 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
python manim实现排序算法动画示例
2022/08/14 Python