jQuery——复选框操作
程序员文章站
2022-05-18 21:23:23
学习jQuer对表单、表格操作的过程中，按照书上的例子发现一个问题： 以下代码同样使用prop()函数，使用attr()方法也不能实现预期 ......
学习jquer对表单、表格操作的过程中，按照书上的例子发现一个问题：
1 <!doctype html>
2 <html>
3 <head>
4 <title>复选框应用</title>
5 <style type="text/css">
6 form{
7 border:1px solid #ccc;
8 width:300px;
9 padding:10px;
10 margin:auto;
11 }
12 </style>
13 <script type="text/javascript" src="../jquery-3.4.1.js"></script>
14 <script type="text/javascript">
15 $(function(){
16 //书上如此添加按钮事件处理——问题：当单击触发了反选事件之后，再次点击“全选”、“全不选”按钮不起作用，需要按照如下修改，即使用each()方法，才可以；或者将attr()方法修改为prop()方法也可实现预期
17 // $("#checkedall").click(function(){
18 // $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
19 // });
20 // $("#checkedno").click(function(){
21 // $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
22 // });
23
24 $("#checkedall").click(function(){
25 $("[name=items]:checkbox").each(function(){
26 this.checked=true;
27 });
28 });
29 $("#checkedno").click(function(){
30 $("[name=items]:checkbox").each(function(){
31 this.checked=false;
32 });
33 });
34 $("#checkedrev").click(function(){
35 $("[name=items]:checkbox").each(function(){
36 // $(this).attr("checked",!$(this).attr("checked"));
37 this.checked=!this.checked;
38 });
39 });
40 $("#send").click(function(){
41 var str="你选中的是：\r\n";
42 $("[name=items]:checkbox").each(function(){
43 if(this.checked)
44 str+=$(this).val()+"\r\n";
45 });
46 alert(str);
47 });
48 })
49 </script>
50 </head>
51 <body>
52 <form>
53 你爱好的运动是？<br/>
54 <input type="checkbox" name="items" value="足球"/>足球
55 <input type="checkbox" name="items" value="篮球"/>篮球
56 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
57 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
58 <input type="button" id="checkedall" value="全选"/>
59 <input type="button" id="checkedno" value="全不选"/>
60 <input type="button" id="checkedrev" value="反选"/>
61 <input type="button" id="send" value="提交"/>
62 </form>
63 </body>
64 </html>
以下代码同样使用prop()函数，使用attr()方法也不能实现预期
1 <!doctype html>
2 <html>
3 <head>
4 <title>复选框应用</title>
5 <style type="text/css">
6 form{
7 border:1px solid #ccc;
8 width:500px;
9 padding:10px;
10 margin:auto;
11 font-size:20px;
12 }
13 </style>
14 <script type="text/javascript" src="../jquery-3.4.1.js"></script>
15 <script type="text/javascript">
16 $(function(){
17 $("#checkedall").click(function(){
18 $("[name=items]:checkbox").prop("checked",this.checked);
19 });
20
21 $("[name=items]:checkbox").click(function(){
22 var flag=true;
23 $("[name=items]:checkbox").each(function(){
24 if(!this.checked)
25 flag=false;
26 });
27 // alert($("#checkedall")[0]);
28 // alert($("#checkedall")[0].getattribute("checked"));
29 //此处使用attract()方法，在ie中和在chrome中均不能实现预期，需要修改为prop()方法
30 // $("#checkedall").attr("checked",flag);
31 $("#checkedall").prop("checked",flag);
32 // alert($("#checkedall").prop("checked"));//使用attr()时，返回undifined
33 });
34
35 $("#checkedrev").click(function(){
36 $("[name=items]:checkbox").each(function(){
37 // $(this).prop("checked",!$(this).attr("checked"));
38 this.checked=!this.checked;
39 });
40 });
41 $("#send").click(function(){
42 var str="你选中的是：\r\n";
43 $("[name=items]:checkbox").each(function(){
44 if(this.checked)
45 str+=$(this).val()+"\r\n";
46 });
47 alert(str);
48 });
49 })
50 </script>
51 </head>
52 <body>
53 <form>
54 你爱好的运动是？<input type="checkbox" id="checkedall" value="全选/全不选" />全选/全不选<br/>
55 <input type="checkbox" name="items" value="足球"/>足球
56 <input type="checkbox" name="items" value="篮球"/>篮球
57 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
58 <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
59 <input type="button" id="checkedrev" value="反选"/>
60 <input type="button" id="send" value="提交"/>
61 </form>
62 </body>
63 </html>