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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python探索之SocketServer详解
2017/10/28 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python如何实现递归转非递归
2021/02/25 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物