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 相关文章推荐
微信小程序  生命周期详解
Oct 27 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
纯JS实现五子棋游戏
May 28 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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获取远程图片并保存到本地的方法
2015/05/12 PHP
php简单生成随机数的方法
2015/07/30 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python实现将内容分行输出
2015/11/05 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Django框架反向解析操作详解
2019/11/28 Python
Pytorch之contiguous的用法
2019/12/31 Python
python实现mean-shift聚类算法
2020/06/10 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
护理专业大学生自我推荐信
2014/01/25 职场文书
家长对小学生的评语
2014/01/28 职场文书
生日主持词
2014/03/20 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
小学信息技术教学反思
2016/02/16 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python