JQuery学习笔记10——复选框应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>复选框应用</title>
6

$(document).ready(function(){
9

$("#CheckedAll").click(//获取全选按钮
10

function(){
11

$("input[name=items]").attr("checked",true);
12

})
13

$("#CheckedNo").click(//获取全不选按钮
14

function(){
15

$("input[name=items]").attr("checked",false);
16

})
17

$("#CheckedRev").click(//获取反选按钮
18

function(){
19

$("input[name=items]").each(function(){
20

this.checked=!this.checked;
21

});
22

})
23

$("#send").click(//提交按钮
24

function(){
25

var str="你选中的是：\r\n"
26

$("input[name=items]:checked").each(function(){
27

str+=$(this).val()+"\r\n";
28

});
29

alert(str);
30

})
31

$("#CheckedboxAll").click(//全选/全不选按钮
32

function(){
33

$("input[name=items]").attr("checked",this.checked);
34

})
35

<!--
36

$("input[name=items]").click(//完善全选/全不选按钮
37

function(){
38

var flag = true;
39

$("input[name=items]").each(function(){
40

if(!this.checked){
41

flag = false;
42

}
43

});
44

$("#CheckedboxAll").attr("checked",flag);
45

})
46

-->
47

})
49

</script>
50

.msg_caption span{ background:#ccc; display:inline-block; width:60px; text-align:center; height:28px; line-height:28px; cursor:pointer;}
52

</style>
53

</head>
54

<body>
55

<form>
56

你爱好的运动是？<input type="checkbox" name="but" id="CheckedboxAll" value="全选/全不选"/>全选/全不选<br/>
57

<input type="checkbox" name="items" value="足球"/>足球
58

<input type="checkbox" name="items" value="篮球"/>篮球
59

<input type="checkbox" name="items" value="羽毛球"/>羽毛球
60

<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
61

<input type="button" id="CheckedAll" value="全选"/>
62

<input type="button" id="CheckedNo" value="全不选"/>
63

<input type="button" id="CheckedRev" value="反选"/>
64

<input type="button" id="send" value="提交"/>
65

</form>
66

</body>
67

</html>

posted @ 2009-07-15 15:38 郭培阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

JQuery学习笔记10——复选框应用

公告