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 面向对象编程基础:封装
Aug 21 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JS简单计算器实例
Jan 20 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python实现单向链表详解
2018/02/08 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
如何学习Python time模块
2020/06/03 Python
文员的职业生涯规划发展方向
2014/02/08 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS