复选框的基本应用：对复选框进行全选、反选和全不选等操作。复杂的操作则需要与选项挂钩，来达到各种级联反应效果。
例一：实现复选框的基本操作
HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<form method="post" action="">
你爱好的运动是？
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
</form>
|
jQuery代码（已经导入jQuery包）
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
|
$(function(){
//全选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
//全不选
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').attr('checked', false);
});
//反选
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked;
//$(this).attr("checked",!$(this).attr("checked") );
});
});
//提交
$("#send").click(function(){
var str="你选中的是：rn";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"rn";
});
alert(str);
});
});
|
- 全选操作通过给每个复选框的checked属性赋值为true。（采取attr()方法）
- 全不选操作通过给每个复选框的checked属性赋值为flase 。（采取attr()方法）
- 反选操作需要对每一个复选框进行设置，取它们值的反值。（采取each()方法和attr()方法）
- 提交通过val()方法获取选中的复选框的值
注意： 在测试中发现，全选与全不选功能可行，反选功能也可行，但是在勾选其中的复选框后，全选与全不选的功能全部失效。即反复调用attr(‘checked’,true/false)只有第一次生效.
解决方法:在询问同学之后，发现罪魁祸首是 ==attr()方法==
在jQuery1.6开始，jQuery提供新的方法prop()来获取这些属性。使用prop()的时候，返回值是标准属性：true/false。当然赋值的时候也是如此
按照官方说明，如果是设置disabled和checked这些属性，应使用prop()方法，而不是使用attr()方法
改进代码（即把attr()方法改为prop()方法）
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
|
<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').prop('checked', true);
});
//全不选
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').prop('checked', false);
});
//反选
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked;
//$(this).attr("checked",!$(this).attr("checked") );
});
});
//提交
$("#send").click(function(){
var str="你选中的是：rn";
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+"rn";
});
alert(str);
});
});
</script>
|
例二：实现复选框的复杂操作
HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
|
<form >
你爱好的运动是？
<input type="checkbox" id="CheckedAll"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="send" value="提 交"/>
</form>
|
jQuery代码(已经导入jQuery包)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script>
$(function(){
//全选或全不选
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').prop("checked",this.checked);
});
//增强
$('input[type=checkbox][name=items]').click(function(){
var flag=true;
$('input[type=checkbox][name=items]').each(function(){
if(!this.checked){
flag=false;
}
});
$('#CheckedAll').prop('checked',flag);
});
})
</script>
|
- 全选或全不选功能通过prop()方法把全选或全不选选择框的状态(this.checked)赋给复选框组
- 根据变量flag的值来设置id为“CheckedAll”的复选框是否被选中，根据flag的值来实现复选框和复选框组的联动
近期评论