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代码[翻译]
Feb 12 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
javascript每日必学之循环
Feb 19 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
从零开始学习搭建React脚手架项目
Aug 23 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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 fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP中的self关键字详解
2019/06/23 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript下function声明一些小结
2007/12/28 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
三好学生自我鉴定
2013/12/17 职场文书
大一新生学期自我评价
2014/04/09 职场文书
师范生见习报告
2014/10/31 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
css3带你实现3D转换效果
2022/02/24 HTML / CSS
搭建Yolov5服务器
2022/04/30 Servers