Jquery实现智能全选(new) - 面向对象网,web开发,jquery,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Jquery > 正文

Jquery实现智能全选(new)

来源: www.bianceng.cn 阅读:

做页面一直会遇到全选和全不选的问题,在网上什么一句话实现全选全不选,也有很多用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);
                $(this).attr("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时每组可以单独使用,但是找不 到区分的方法,这个有待更新,希望有大神可以给点思路。

查看本栏目更多精彩内容:http://www.bianceng.cn/webkf/jquery/

Tags:
相关文章列表: