预期效果&＃xff1a;
1.全选按钮checked——>所有items的状态变成checked
2.全选按钮unchecked——>所有items的状态变成unchecked
3.所有items都checked——>全选按钮的状态变成checked
4.有一个item是unchecked——>全选按钮的状态变成unchecked
5.输出选中的值
效果1和2&＃xff1a;
效果3和4&＃xff1a;
效果5&＃xff1a;
注意点&＃xff1a;需要使用prop设置checkbox的值&＃xff0c;使用attr会出错
源代码&＃xff1a;jQuery为在线引用&＃xff0c;因此代码复制可用
1 DOCTYPE html>
2 <html lang&＃61;"en">
3 <head>
4 <meta charset&＃61;"UTF-8">
5 <title>Titletitle>
6 <script src&＃61;"https://code.jquery.com/jquery-3.2.1.min.js">script>
7 head>
8 <body>
9 <form method&＃61;"post" action&＃61;"">
10 你爱好的运动是&＃xff1f;
11 <input type&＃61;"checkbox" id&＃61;"checkAll"/>全选/全不选<br/>
12 <input type&＃61;"checkbox" name&＃61;"items" value&＃61;"足球"/>足球
13 <input type&＃61;"checkbox" name&＃61;"items" value&＃61;"篮球"/>篮球
14 <input type&＃61;"checkbox" name&＃61;"items" value&＃61;"羽毛球"/>羽毛球
15 <input type&＃61;"checkbox" name&＃61;"items" value&＃61;"乒乓球"/>乒乓球<br/>
16 <input type&＃61;"button" id&＃61;"submit" value&＃61;"提 交"/>
17 form>
18 <script>
19 $(function () {
20 $("#checkAll").click(function () {
21 $("[name&＃61;items]:checkbox").prop("checked", this.checked);
22 })
23 //当有一个items没有选中时&＃xff0c;全选按钮的状态为unchecked&＃xff1b;如果所有items都选中了&＃xff0c;全选按钮的状态为checked
24 $("[name&＃61;items]:checkbox").click(function () {
25 var flag &＃61; true;
26 $("[name&＃61;items]:checkbox").each(function () {
27 if (!this.checked) {
28 flag &＃61; false;
29 }
30 })
31 $("#checkAll").prop("checked", flag);
32 })
33 $("#submit").click(function () {
34 var str &＃61; "你选中的是&＃xff1a;\r\n";
35 $("[name&＃61;items]:checkbox:checked").each(function () {
36 str &＃43;&＃61; $(this).val() &＃43; "\r\n";
37 })
38 alert(str);
39 })
40 })
41 script>
42 body>
43 html>
京公网安备 11010802041100号