复选框复选框


8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

复选框的基本应用:对复选框进行全选、反选和全不选等操作。复杂的操作则需要与选项挂钩,来达到各种级联反应效果。

例一:实现复选框的基本操作

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()方法==

image

在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的值来实现复选框和复选框组的联动