jquery实现全选功能效果的实现代码


Posted in Javascript onMay 05, 2016

主要是模拟一些网页中的表格实现全选功能。

<form>     

你爱好的运动是:    

<input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选     <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="乒乓球" />乒乓球 

</form>

当我们点击全选/全部不选按钮时,下面的checkbox执行相应的操作。

同时反过来,当全选时,下面任意一个checkbox未选中,则全选/全不选按钮也不会被选中。

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

var p = $('[name=items]:checkbox');        

 if(p.filter(':checked').length==p.length)        

{           //alert("Hello World");          

 $("#Check").attr("checked", true);        

} else {          

$("#Check").attr("checked", false);       

 }      

});

以上这篇jquery实现全选功能效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Vue自定义指令写法与个人理解
Feb 09 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 #Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 #Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python处理中文标点符号大集合
2018/05/14 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
房产公证书格式
2015/01/26 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android