前端 复选框复选框

jialikesi · June 12, 2020 · 6 hits

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

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

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 的值来实现复选框和复选框组的联动
No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.