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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
JavaScript小技巧整理
Dec 30 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 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
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
python自动12306抢票软件实现代码
2018/02/24 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python中p-value的实现方式
2019/12/16 Python
python软件都是免费的吗
2020/06/18 Python
python代码实现猜拳小游戏
2020/11/30 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
C#的几个面试问题
2016/05/22 面试题
平面设计的岗位职责
2013/11/08 职场文书
人事助理岗位职责
2013/11/18 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
财务管理专业求职信
2014/06/11 职场文书
三峡大坝导游词
2015/01/31 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js