JQuery学习笔记10——复选框应用
1
<!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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>复选框应用</title>
6<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
7<script type="text/javascript">
8
$(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
48
})
49</script>
50<style type="text/css">
51.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>
<!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
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5
<title>复选框应用</title>6
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>7
<script type="text/javascript">8
$(document).ready(function(){
$(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
48
}) 49
</script>50
<style type="text/css">51
.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>