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的仿flash的广告轮播代码
Nov 04 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
node.js如何操作MySQL数据库
Oct 29 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript中的类继承
2010/11/25 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
原生js实现放大镜
2017/02/20 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
简单了解Python中的几种函数
2017/11/03 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python实现代码统计程序
2019/09/19 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
个人授权委托书
2014/04/03 职场文书
课外活动总结
2015/02/04 职场文书
身份证丢失证明
2015/06/19 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js