js实现功能比较全面的全选和多选


Posted in Javascript onMarch 02, 2017

效果图:

js实现功能比较全面的全选和多选

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head>
 <body>
 <input type="checkbox" id="checkbox" value="1" onclick="check()" />水果 <br />
 <input type="checkbox" value="${article.id}" name="box" class="item" />奶茶<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>香蕉<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>橘子<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>苹果<br />
 <input type="checkbox" value="${article.id}" name="box" class="item"/>梨子<br />
 <script type="text/javascript">
 function quanxuan(){
 var $checkbox = $(".item"); 
 var $checked = $checkbox.filter(":checked");
 if($checkbox.length == $checked.length){
  $("#checkbox").prop("checked",true);
 }else{
  $("#checkbox").prop("checked",false);
 }
 }
 $(function(){
 $("#checkbox").on("change",function(){
  var checked = $(this).prop("checked"); // true / false
  $(".item").prop("checked",checked);
  quanxuan();
 });
 $("body").on("change" , ".item",function(e){
  quanxuan();
 });
 }); 
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
JSONP跨域请求
Mar 02 #Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
You might like
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
学习php中的正则表达式
2014/08/17 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
python属于软件吗
2020/06/18 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
记帐员岗位责任制
2014/02/08 职场文书
读书小明星事迹材料
2014/05/03 职场文书
环保建议书100字
2014/05/14 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫