基于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 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
CCPry JS类库 代码
Oct 30 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
React.js入门学习第一篇
Mar 30 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 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
信用卡效验程序
2006/10/09 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python语言描述随机梯度下降法
2018/01/04 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
详解Python用户登录接口的方法
2019/04/17 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python实现简单井字棋小游戏
2020/03/05 Python
Python request操作步骤及代码实例
2020/04/13 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
如何在pycharm中安装第三方包
2020/10/27 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
个人委托书怎么写
2014/09/17 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
2014年工程师工作总结
2014/11/25 职场文书
简单的辞职信模板
2015/05/12 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技