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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现文件复制删除
2016/04/19 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python实现连续图文识别
2018/12/18 Python
python3实现点餐系统
2019/01/24 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
解决Python对齐文本字符串问题
2019/08/28 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
音乐教育感言
2014/03/05 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle