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 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JavaScript canvas绘制折线图
Feb 18 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排序算法的复习和总结
2012/02/15 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python制作词云的方法
2018/01/03 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python实现数据分析与建模
2019/07/11 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
工程售后服务承诺书
2014/05/21 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
Python数组变形的几种实现方法
2022/05/30 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL