PROMULGATOR

    袖~牙

    广东省深圳市
    Html
    Css
    Js
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
<h2 id="h2-caption">jQuery复选框 全选 反选 取消 选中输出等功能</h2>
<hr><br>
<div class="mar20">
    <input name="newslist-1" id="newslist-1" type="checkbox" value="1"><label for="newslist-1">超实用的jQuery代码段1</label>
</div>
<div class="mar20">
    <input name="newslist-2" id="newslist-2" type="checkbox" value="2"><label for="newslist-2">超实用的jQuery代码段2</label>
</div>
<div class="mar20">
    <input name="newslist-3" id="newslist-3" type="checkbox" value="3"><label for="newslist-3">超实用的jQuery代码段3</label>
</div>
<div class="mar20">
    <input name="newslist-4" id="newslist-4" type="checkbox" value="4"><label for="newslist-4">超实用的jQuery代码段4</label>
</div>
<div class="mar20">
    <input name="newslist-5" id="newslist-5" type="checkbox" value="5"><label for="newslist-5">超实用的jQuery代码段5</label>
</div>
<div class="mar20">
    <input name="newslist-6" id="newslist-6" type="checkbox" value="6"><label for="newslist-6">超实用的jQuery代码段6</label>
</div>
<div class="mar20">
    <input name="allselect" id="allselect" type="button" value="全选">
    <input name="invert" id="invert" type="button" value="反选">
    <input name="cancel" id="cancel" type="button" value="取消">
    <input name="output" id="output" type="button" value="输出">
</div>
<br>
<hr>
<div id="div-log">
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
* {
    margin:0;
    padding:0;
    list-style-type:none;
}
.mar20 {
    margin:20px;
    font:13.5px "Trebuchet MS",sans-serif;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(document).ready(function() {
    // 全选
    $("#allselect").click(function() {
        $(":checkbox").each(function() {
            $(this).prop("checked", true);
            $(this).next().css({
                "background-color": "blue",
                "color": "White"
            });
        });
    });
    //反选
    $("#invert").click(function() {
        $(":checkbox").each(function() {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
                $(this).next().css({
                    "background-color": "White",
                    "color": "black"
                });
            } else {
                $(this).prop("checked", true);
                $(this).next().css({
                    "background-color": "blue",
                    "color": "White"
                });
            }
        });
    });
    //取消
    $("#cancel").click(function() {
        $(":checkbox").each(function() {
            $(this).prop("checked", false);
            $(this).next().css({
                "background-color": "White",
                "color": "black"
            });
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

jQuery复选框全选、反选

0