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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
JS代码优化的8点建议
Feb 04 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
ant design 日期格式化的实现
Oct 27 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
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
用Python编写web API的教程
2015/04/30 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
办公室文秘岗位职责
2013/11/15 职场文书
主管会计岗位职责
2014/03/13 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
教师岗位职责
2015/02/03 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS