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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
ext jquery 简单比较
Apr 07 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
jquery实现网页定位导航
Aug 23 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JavaScript动态生成表格的示例
Nov 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中使用XML
2006/10/09 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Python中有趣在__call__函数
2015/06/21 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
面试后的感谢信范文
2014/02/01 职场文书
户外拓展活动方案
2014/02/11 职场文书
文明工地标语
2014/06/16 职场文书
技术经济专业求职信
2014/09/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书
培训后的感想
2015/08/07 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server