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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 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 cURL初始化和执行方法入门级代码
2015/05/28 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JS常用算法实现代码
2016/11/14 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
python3中int(整型)的使用教程
2017/03/23 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python 绘制正态曲线的示例
2020/09/24 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
Android笔试题总结
2014/11/29 面试题
文员个人求职自荐信
2013/09/21 职场文书
计划生育证明书写要求
2014/09/17 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
担保书范文
2015/01/20 职场文书
辩护词范文大全
2015/05/21 职场文书
2015年教研工作总结
2015/05/23 职场文书
户外拓展训练感想
2015/08/07 职场文书
通知怎么写?
2019/04/17 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers