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 同时提交多个Web表单的方法
Feb 19 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
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使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
python编写暴力破解FTP密码小工具
2014/11/19 Python
python中threading超线程用法实例分析
2015/05/16 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python getopt详解及简单实例
2016/12/30 Python
python多线程并发实例及其优化
2019/06/27 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python 发送get请求接口详解
2020/11/17 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
门卫人员岗位职责
2013/12/24 职场文书
行政主管职责范本
2014/03/07 职场文书
公司口号大全
2014/06/11 职场文书
优秀教研组申报材料
2014/12/26 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js