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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
js禁止表单重复提交
Aug 29 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
引用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/05/04 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Pytorch 实现权重初始化
2019/12/31 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
外贸业务员工作职责
2014/01/06 职场文书
松材线虫病防治方案
2014/06/15 职场文书
超市工作总结范文2014
2014/12/19 职场文书
工作推荐信模板
2015/03/25 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python