jquery设置checkbox全选/取消全选

在做设置角色权限时，我选择使用checkbox来让用户来勾选。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>checkbox - javascript</title>
  
    <script src="jquery-1.42.min.js" type="text/javascript"></script>
    <style type="text/css">
        .curr
        {
             border:1px solid green;
        }
    </style>
</head>
<body>
<div>
    <div style=" border-bottom:1px solid #cccccc; width:100%; padding-bottom:10px; margin-bottom:20px; margin-left:15px;">
        <input type="checkbox" class='box' value ='1' />信息管理
    </div>
        <input class="1" type="checkbox" />联系我们
        <input class="1" type="checkbox" />新闻中心
        <input class="1" type="checkbox" />新闻中心
        <input class="1" type="checkbox" />新闻中心
        <input class="1" type="checkbox" />新闻中心
        <input class="1" type="checkbox" />新闻中心
    <div style="border-bottom:1px solid #cccccc; margin-top:5px; width:100%;margin-left:15px">&nbsp;</div>
</div>
<div style=" margin-top:20px;">
    <div style="border-bottom:1px solid #cccccc; width:100%; padding-bottom:10px; margin-bottom:20px; margin-left:15px;">
        <input type="checkbox" value='2' class='box' />基础设置
    </div>
    <input class="2" type="checkbox" name="checkbox1" />信息类型
    <input class="2" type="checkbox" name="checkbox2" />链接类型
    <input class="2" type="checkbox" name="checkbox2" />公司信息设置
    <div style="border-bottom:1px solid #cccccc; margin-top:5px; width:100%;margin-left:15px">&nbsp;</div>
</div>
  
</body> 
</html>
<script type="text/javascript">
    $(".box").bind("click", function() {
        var a = $(this).attr("value");
        var zt = $(this).attr("checked");
        $('.' + a).each(
                function() {
                    if (zt == true)
                        $(this).attr("checked", true);
                    else
                        $(this).attr("checked", false);
  
                }
            );
  
            })
  
            $("input[type='checkbox']").bind("click", function() {
                if ($(this).attr("checked") == true) {
                    $(this).parent().children("div").children().attr("checked", true);
                }
            })
</script>

 

回头补充。。。。

posted @ 2012-10-07 17:16  学永不止步  阅读(136)  评论(0)    收藏  举报