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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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+mysql 实现身份验证代码
2010/03/24 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python实现网站注册验证码生成类
2017/06/08 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
PyTorch中的C++扩展实现
2020/04/02 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
计算机专业自荐信范文
2014/05/28 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
拖欠货款起诉状
2015/05/20 职场文书