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 相关文章推荐
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
浅谈react路由传参的几种方式
Mar 23 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python3.6编写的单元测试示例
2019/08/17 Python
在django模板中实现超链接配置
2019/08/21 Python
python将时分秒转换成秒的实例
2019/12/07 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
教师评优事迹材料
2014/01/10 职场文书
社团文化节策划书
2014/02/01 职场文书
销售人员获奖感言
2014/02/05 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
酒店厨房管理制度
2015/08/06 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android