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的caller,callee,call,apply
Apr 28 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
jquery拖动改变div大小
Jul 04 jQuery
vue实现select下拉显示隐藏功能
Sep 30 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 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读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python中turtle库的使用实例
2019/09/09 Python
python+pygame实现坦克大战
2019/09/10 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
应届生程序员求职信
2013/11/05 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
环保建议书
2014/03/12 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
中学语文教学反思
2016/02/16 职场文书
了解Redis常见应用场景
2021/06/23 Redis
如何优化vue打包文件过大
2022/04/13 Vue.js