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 相关文章推荐
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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连接Oracle for NT 远程数据库
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP _construct()函数讲解
2019/02/03 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
js表数据排序 sort table data
2009/02/18 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
vue实现选中效果
2020/10/07 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python with (as)语句实例详解
2020/02/04 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
妈妈活动方案
2014/08/15 职场文书
村委会贫困证明范本
2014/09/17 职场文书
科技活动周标语
2014/10/08 职场文书
事业单位个人总结
2015/02/12 职场文书
员工辞职信怎么写
2015/02/27 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
python程序的组织结构详解
2021/12/06 Python