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代码(如:name,age)
Aug 10 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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.NET的入门教程
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
setTimeout学习小结
2017/02/08 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
shell程序中如何注释
2012/02/17 面试题
同事打架检讨书
2014/02/04 职场文书
大学生先进事迹材料
2014/02/16 职场文书
红色故事演讲稿
2014/05/22 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
教师节联欢会主持词
2015/07/04 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android