45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何通过js实现功能全面的全选和多选?

如何通过js实现功能全面的全选和多选?

2017-06-25 13:38:19 来源:www.45fan.com 【

如何通过js实现功能全面的全选和多选?

效果图:

如何通过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>

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


本文地址:http://www.45fan.com/bcdm/89140.html
Tags: 实现 比较 功能
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部