对复选框最基本的应用, 就是对复选框进行全选,反选和全不选等操作.复杂的操作需要与选项挂钩,来达到各种级联效果.
首先在空白网页中创建一个表单, 其中放入一组复选框:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <form action="">
9 你爱好的运动是?<br/>
10 <input type="checkbox" name="items" value="足球"/>足球
11 <input type="checkbox" name="items" value="篮球"/>篮球
12 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
13 <input type="checkbox" name="items" value="兵乓球"/>兵乓球
14 <input type="checkbox" name="items" value="排球"/>排球<br/>
15 <input type="button" id="CheckedAll" value="全选"/>
16 <input type="button" id="CheckedNo" value="全不选"/>
17 <input type="button" id="CheckedRev" value="反选"/>
18 <input type="button" id="send" value="提交">
19 </form>
20 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>
21 <script type="text/javascript">
22 $(function () {
23 //全选
24 $("#CheckedAll").click(function () {
25 $("[name = items]:checkbox").attr("checked",true);
26 });
27 //全不选
28 $("#CheckedNo").click(function () {
29 $("[name = items]:checkbox").attr("checked",false);
30 });
31 //反选
32 /***
33 * 反选需要循环每一个复选框进行设置,取他们值得反值.
34 */
35 $("#CheckedRev").click(function () {
36 $("[name = items]:checkbox").each(function(){
37 $(this).attr("checked",!$(this).attr("checked"));
38 });
39 });
40 /***
41 * 此处用jQuery的attr()方法来设置属性checked的有些复杂,如果改用javascript原生的DOM方法,将比jQuery对象更有效和简洁.
42 */
43 $("#CheckedRev").click(function () {
44 $("[name = items]:checkbox").each(function(){
45 this.checked = !this.checked;
46 });
47 });
48 /***
49 * 复选框选中后,用户单机提交按钮, 需要将选中的项的值输出.可以通过val()方法获取选中的值.
50 */
51 $("#send").click(function () {
52 var str = "你选中的是:\r\n";
53 $("[name = items]:checkbox:checked").each(function(){
54 str += $(this).val() + "\r\n";
55 });
56 console.log(str);
57 });
58 });
59 </script>
60 </body>
61 </html>
效果截图:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <form action="">
9 你爱好的运动是?<br/>
10 <input type="checkbox" id="CheckedAll"/>全选/全不选<br/>
11 <input type="checkbox" name="items" value="足球"/>足球
12 <input type="checkbox" name="items" value="篮球"/>篮球
13 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
14 <input type="checkbox" name="items" value="兵乓球"/>兵乓球
15 <input type="checkbox" name="items" value="排球"/>排球<br/>
16 <input type="button" id="send" value="提交">
17 </form>
18 <script type="text/javascript" src="js/jquery-1-8-3.js"></script>
19 <script type="text/javascript">
20 $(function () {
21 //全选
22 // $("#CheckedAll").click(function () {//如果当前单机的复选框被选中
23 // if(this.checked){
24 // $("[name = items]:checkbox").attr("checked",true);
25 // }else{
26 // $("[name = items]:checkbox").attr("checked",false);
27 // }
28 // });
29
30 /***
31 * 所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的, 因此可以省略if判断,直接赋值
32 */
33
34 // $("#CheckedAll").click(function () {//如果当前单机的复选框被选中
35 // $("[name = items]:checkbox").attr("checked",this.checked);
36 // });
37
38 /***
39 * 当单机id为CheckedAll的复选框后, 复选框组被选中.
40 * 当复选框组里取消某一个选项的选中状态, id为CheckedAll的复选框并没有被取消选中状态.
41 * 而此时需要它和复选框能够联系起来,即复选框组里如果有一个或者更多没选中时,则取消d为CheckedAll的复选框的选中状态.
42 * 如果复选框组被选中时,则d为CheckedAll的复选框也自动被选中.
43 * 因此需要对复选框组进行操作, 以通过他们来控制d为CheckedAll的复选框.
44 * (1)对复选框组绑定单击事件.
45 * (2)定义一个flag变量, 默认为true
46 * (3)循环复选框组, 当有没被选中的项时,则把变量flag的值设置为false.
47 * (4)根军变量flag的值来设置id为CheckedAll的复选框是否选中.
48 */
49
50 $("#CheckedAll").click(function () {//如果当前单机的复选框被选中
51 $("[name = items]:checkbox").attr("checked",this.checked);
52 });
53 // $("[name = items]:checkbox").click(function () {
54 // var flag = true;
55 // $("[name = items]:checkbox").each(function () {
56 // if(!this.checked){
57 // flag = false;
58 // }
59 // });
60 // $("#CheckedAll").attr("checked", flag);
61 // });
62 /***
63 * 另一种办法
64 * (1)对复选框绑定单击事件
65 * (2)判断复选框的总数是否与选中复选框数量相等.
66 * (3)如果相等,则说明全部选中,否则不选中.
67 */
68 $("[name = items]:checkbox").click(function () {
69 //定义一个临时变量, 避免重复使用同一个选择器选择页面中的元素, 提高程序效率
70 var $tmp = $("[name = items]:checkbox");
71 //用filter()方法筛选出选中的复选框,并直接给CheckedAll赋值
72 $("#CheckedAll").attr("checked", $tmp.length == $tmp.filter(":checked").length);
73 });
74
75 $("#send").click(function () {
76 var str = "你选中的是:\r\n";
77 $("[name = items]:checkbox:checked").each(function(){
78 str += $(this).val() + "\r\n";
79 });
80 console.log(str);
81 });
82 });
83 </script>
84 </body>
85 </html>
下过截图:
时间： 2024-10-07 16:37:36