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 生成指定范围数值随机数
Jan 09 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
js调用css属性写法
Sep 21 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
jquery中键盘事件小结
Feb 24 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JS原型链怎么理解
2016/06/27 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python CSV模块使用实例
2015/04/09 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
专家推荐信怎么写
2015/03/25 职场文书
道歉的话怎么说
2015/05/12 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python