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 DOM 学习第五章 表单简介
Feb 19 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
深入探寻javascript定时器
Jan 02 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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微信公众平台开发类实例
2015/04/01 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
win系统下nodejs环境安装配置
2017/05/04 NodeJs
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
小学教师评语大全
2014/04/23 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
教师党员整改措施
2014/10/24 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书