zoukankan      html  css  js  c++  java
  • Jquery 实现智能全选(new)

    做页面一直会遇到全选和全不选的问题,在网上什么一句话实现全选全不选,也有很多用js方法实现的。

    但是好像都忽略了一个问题,全选的可以控制下面的列表,但是下面的列表不能控制上面的全选,所以我就写了个例子

    思路,一个全选checkALl,其他为checkItem,如果checkAll,全选和全不选下面的checkItem肯定也是全不选

      但是如果checkItem为有一个没有勾选,checkAll就不应该勾选,如果checkItem全勾选上,checkAll应该要变为是勾选上的

    ok,看看我实现的效果吧 

    把以下代码直接保存为htm文件就可以看到效果

    再看看实现过程

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                $("#checkAll").click(function () {
                    $(".checkItem").attr("checked", $(this)[0].checked);
                     })
    
                $(".checkItem").click(function () {
                    var objs = $(".checkItem");
                    var isAllChecked = true; //是否是全選
                    for (var i = 0; i < objs.length; i++) {
                        if (!objs[i].checked) {
                            isAllChecked = false;
                break;
                        }
                    }
                 $("#checkAll").attr("checked", isAllChecked); 
    
                }
                );
    
            });
        </script>
        <input type="checkbox" id="checkAll" />
        全選
        <div>
            <input type="checkbox" class="checkItem" />
            1<br />
            <input type="checkbox" class="checkItem" />
            2<br />
            <input type="checkbox" class="checkItem" />
            3<br />
            <input type="checkbox" class="checkItem" />
            4<br />
        </div>
    </body>
    </html>
    复制代码

    有以下几点需要注意

    1:为什么全选时转为$(this)[0].checked DOM元素,我在查看别人利用的$(this).attr("checked")来决定勾选是发现不选上时是无效的,因为其为未定义的

    2:其实只需判断是否为全选,如果有一个没有勾上,Checkall应该是不勾上,当全部勾上时才是全勾上

    提问:我想把这个方法写为公用的方法,使页面上有多组checkbox时每组可以单独使用,但是找不到区分的方法,这个有待更新,希望有大神可以给点思路。

  • 相关阅读:
    ajax加载数据字典下拉选后台
    【算法】二叉树前中后序的递归+迭代(java代码)
    【设计模式】代理模式与装饰器模式的区别
    《重构》读书笔记(一)
    【服务器安全】记一次处理挖矿病毒经历
    【计算机原理】数值存储计算基本理论(一)
    【JAVA】java中类的执行顺序
    【numpy&pandas】Pandas速查笔记
    【前端】打包vue项目到nginx过程
    【服务器搭建】Linux下安装docker
  • 原文地址:https://www.cnblogs.com/systemEsc/p/3520301.html
Copyright © 2011-2022 走看看