checkAlluncheckall/index.html at master · javascriptObject/checkAlluncheckall · GitHub

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选全不选以及监听取消全选或自动全选</title>
    <style>
        .bg{
            background-image: url(images/list_bg.gif);
            background-repeat: no-repeat;
            width: 730px;
        }
        td{text-align:center;
            font-size:13px;
            line-height:25px;
        }
        body{margin:0}
    </style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="bg">
    <form action="" method="post">
        <tr>
            <td style="height:40px;">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr style="font-weight:bold;">
            <td>
                <input id="all" type="checkbox" value="全选" />
                全选
            </td>
            <td>商品图片</td>
            <td>商品名称/出售者/联系方式</td>
            <td>价格</td>
        </tr>
        <tr>
            <td colspan="4">
                <hr style="border:1px  #CCCCCC dashed" />
            </td>
        </tr>
        <tr>
            <td>
                <input name="product" type="checkbox" value="1" />
            </td>
            <td>
                <img src="images/list0.jpg" alt="alt" />
            </td>
            <td>
                杜比环绕，家庭影院必备，超真实享受<br />
                出售者：ling112233<br />
                <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
                <img src="images/list_tool_fav1.gif" alt="alt" />
                收藏
            </td>
            <td>一口价<br />
                2833.0
            </td>
        </tr>
        <tr>
            <td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
        <tr>
            <td>
                <input name="product" type="checkbox" value="2" />
            </td>
            <td>
                <img src="images/list1.jpg" alt="alt" />
            </td>
            <td>
                NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
                出售者：aipiaopiao110 <br />
                <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
                <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏
            </td>
            <td>
                一口价<br />
                6464.0
            </td>
        </tr>
        <tr>
            <td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
        <tr>
            <td><input name="product" type="checkbox" value="3" /></td>
            <td><img src="images/list2.jpg" alt="alt" /></td>
            <td>精品热卖：高清晰，30寸等离子电视<br />
                出售者：阳光的挣扎 <br />
                <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
                <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏
            </td>
            <td>一口价<br />
                18888.0
            </td>
        </tr>
        <tr>
            <td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
        <tr>
            <td><input name="product" type="checkbox" value="4" /></td>
            <td><img src="images/list3.jpg" alt="alt" /></td>
            <td>Sony索尼家用最新款笔记本 <br />
                出售者：疯狂的镜无<br />
                <img src="images/online_pic.gif" alt="alt" /> &nbsp;&nbsp;
                <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏
            </td>
            <td>一口价<br />
                5889.0
            </td>
        </tr>
        <tr>
            <td colspan="4"><hr style="border:1px  #CCCCCC dashed" /></td>
        </tr>
    </form>
</table>
</body>
</html>
<script>
/*
 * 点全选，全部选择或者全部取消
 * 点其余任意一个自动判断全选是否需要选上[重点]
 * js必须写在下面，否则需要onload函数
 * */
var all = document.getElementById("all"),
        product = document.getElementsByName("product"),
        l = product.length;
all.onclick = function(){
    for(var i=l;i--;){
        product[i].checked = all.checked;
    }
};
for(var i=l;i--;){
    product[i].onclick = function(){
        var k = 0;
        for(var i=l;i--;)product[i].checked && k++;
        all.checked = l==k;
    };
}
</script>