基于jQuery实现复选框的全选 全不选 反选功能


Posted in Javascript onNovember 24, 2014

本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。

jQuery代码:

        $(function(){ 

            $("#checkedAll").click(function(){ 

                $('[name=items]:checkbox').attr('checked',true); 

            }); 

            $("#checkedNo").click(function(){ 

                $('[name=items]:checkbox').attr('checked',false); 

            }); 

            $("#checkedRev").click(function(){ 

                $('[name=items]:checkbox').each(function(){ 

                    //$(this).attr('checked',!$(this).attr('checked')); 

                    this.checked = !this.checked; 

                }); 

            }); 

            $("#send").click(function(){ 

               var str = "你选中的是:\r\n"; 

               $('[name=items]:checkbox:checked').each(function(){ 

                   str += $(this).val()+"\r\n"; 

               }); 

                alert(str); 

            }); 

        }); 

HTML代码:

    你爱好的运动是?<br> 

    <input type="checkbox" name="items" value="足球"/>足球 

    <input type="checkbox" name="items" value="篮球"/>篮球 

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> 

    <input type="button" id="checkedAll" value="全 选"/> 

    <input type="button" id="checkedNo" value="全不选"/> 

    <input type="button" id="checkedRev" value="反 选"/> 

    <input type="button" id="send" value="提 交"/>

小伙伴们使用起来是不是很方便,这也是本人千挑万选出来的,希望能对大家有所帮助。

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
基于jQuery实现下拉框
Nov 24 #Javascript
基于jQuery实现表单提交验证
Nov 24 #Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
jQuery选择器全集详解
Nov 24 #Javascript
常见的jQuery选择器汇总
Nov 24 #Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 #Javascript
Javascript学习笔记之数组的构造函数
Nov 23 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
有趣的python小程序分享
2017/12/05 Python
Python 如何提高元组的可读性
2019/08/26 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
商超业务员岗位职责
2014/03/12 职场文书
元旦晚会活动总结
2014/07/09 职场文书
合作意向书
2014/07/30 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
自我检讨书范文
2015/01/28 职场文书
工程合作意向书范本
2015/05/09 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js