[xhtml]
view plain
copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <mce:style><!--
5.
6.
7.
8. --></mce:style><style mce_bogus="1">
9.
10. </style>
11. <title>JS获取复选框被选中的值</title>
12. </head>
13. <body>
14. <input type="checkbox" name="test" value="0" />0
15. <input type="checkbox" name="test" value="1" />1
16. <input type="checkbox" name="test" value="2" />2
17. <input type="checkbox" name="test" value="3" />3
18. <input type="checkbox" name="test" value="4" />4
19. <input type="checkbox" name="test" value="5" />5
20. <input type="checkbox" name="test" value="6" />6
21. <input type="checkbox" name="test" value="7" />7
22. <input type="button" onclick="chk()" value="提 交" />
23. </body>
24. </html
JS代码
[javascript]
view plain
copy
1. <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!--这是载入jquery.js文件，如果不使用jquery可以去掉-->
2. <mce:script type="text/javascript"><!--
3.
4. function chk(){
5. var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象，返回数组
6. //取到对象数组后，我们来循环检测它是不是被选中
7. var s='';
8. for(var i=0; i<obj.length; i++){
9. if(obj[i].checked) s+=obj[i].value+','; //如果选中，将value添加到变量s中
10. }
11. //那么现在来检测s的值就知道选中的复选框的值了
12. ''?'你还没有选择任何内容！':s);
13. }
14.
15. function jqchk(){ //jquery获取复选框值
16. var chk_value =[];
17. 'input[name="test"]:checked').each(function(){
18. this).val());
19. });
20. '你还没有选择任何内容！':chk_value);
21. }
22. // --></mce:script>
对checkbox的其他几个操作
1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值
js代码
[javascript]
view plain
copy
1. $("document").ready(function(){
2. $("#btn1").click(function(){
3. $("[name='checkbox']").attr("checked",'true');//全选
4. })
5. $("#btn2").click(function(){
6. $("[name='checkbox']").removeAttr("checked");//取消全选
7. })
8. $("#btn3").click(function(){
9. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
10. })
11. $("#btn4").click(function(){
12. $("[name='checkbox']").each(function(){//反选
13. if($(this).attr("checked")){
14. $(this).removeAttr("checked");
15. }
16. else{
17. $(this).attr("checked",'true');
18. }
19. })
20. })
21. $("#btn5").click(function(){//输出选中的值
22. var str="";
23. $("[name='checkbox'][checked]").each(function(){
24. str+=$(this).val()+"/r/n";
25. //alert($(this).val());
26. })
27. alert(str);
28. })
29. })
html代码:
[xhtml]
view plain
copy
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>louis-blog >> jQuery 对checkbox的操作</title>
6. <mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script>
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. $("document").ready(function(){
10. $("#btn1").click(function(){
11. $("[name='checkbox']").attr("checked",'true');//全选
12. })
13. $("#btn2").click(function(){
14. $("[name='checkbox']").removeAttr("checked");//取消全选
15. })
16. $("#btn3").click(function(){
17. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
18. })
19. $("#btn4").click(function(){
20. $("[name='checkbox']").each(function(){//反选
21. if($(this).attr("checked")){
22. $(this).removeAttr("checked");
23. }
24. else{
25. $(this).attr("checked",'true');
26. }
27. })
28. })
29. $("#btn5").click(function(){//输出选中的值
30. var str="";
31. $("[name='checkbox'][checked]").each(function(){
32. str+=$(this).val()+"/r/n";
33. //alert($(this).val());
34. })
35. alert(str);
36. })
37. })
38. -->
39. </SCRIPT>
40. </HEAD>
41. <body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">
42. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">
43. <form name="form1" method="post" action="">
44. <input type="button" id="btn1" value="全选">
45. <input type="button" id="btn2" value="取消全选">
46. <input type="button" id="btn3" value="选中所有奇数">
47. <input type="button" id="btn4" value="反选">
48. <input type="button" id="btn5" value="获得选中的所有值">
49. <br /><br />
50. <input type="checkbox" name="checkbox" value="checkbox1">
51. checkbox1
52. <input type="checkbox" name="checkbox" value="checkbox2">
53. checkbox2
54. <input type="checkbox" name="checkbox" value="checkbox3">
55. checkbox3
56. <input type="checkbox" name="checkbox" value="checkbox4">
57. checkbox4
58. <input type="checkbox" name="checkbox" value="checkbox5">
59. checkbox5
60. <input type="checkbox" name="checkbox" value="checkbox6">
61. checkbox6
62. </form>
63. </div>
64. </body>
65. </HTML>
[xhtml]
view plain
copy
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <mce:style><!--
5.
6.
7.
8. --></mce:style><style mce_bogus="1">
9.
10. </style>
11. <title>JS获取复选框被选中的值</title>
12. </head>
13. <body>
14. <input type="checkbox" name="test" value="0" />0
15. <input type="checkbox" name="test" value="1" />1
16. <input type="checkbox" name="test" value="2" />2
17. <input type="checkbox" name="test" value="3" />3
18. <input type="checkbox" name="test" value="4" />4
19. <input type="checkbox" name="test" value="5" />5
20. <input type="checkbox" name="test" value="6" />6
21. <input type="checkbox" name="test" value="7" />7
22. <input type="button" onclick="chk()" value="提 交" />
23. </body>
24. </html
JS代码
[javascript]
view plain
copy
1. <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!--这是载入jquery.js文件，如果不使用jquery可以去掉-->
2. <mce:script type="text/javascript"><!--
3.
4. function chk(){
5. var obj=document.getElementsByName('test'); //选择所有name="'test'"的对象，返回数组
6. //取到对象数组后，我们来循环检测它是不是被选中
7. var s='';
8. for(var i=0; i<obj.length; i++){
9. if(obj[i].checked) s+=obj[i].value+','; //如果选中，将value添加到变量s中
10. }
11. //那么现在来检测s的值就知道选中的复选框的值了
12. ''?'你还没有选择任何内容！':s);
13. }
14.
15. function jqchk(){ //jquery获取复选框值
16. var chk_value =[];
17. 'input[name="test"]:checked').each(function(){
18. this).val());
19. });
20. '你还没有选择任何内容！':chk_value);
21. }
22. // --></mce:script>
对checkbox的其他几个操作
1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值
js代码
[javascript]
view plain
copy
1. $("document").ready(function(){
2. $("#btn1").click(function(){
3. $("[name='checkbox']").attr("checked",'true');//全选
4. })
5. $("#btn2").click(function(){
6. $("[name='checkbox']").removeAttr("checked");//取消全选
7. })
8. $("#btn3").click(function(){
9. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
10. })
11. $("#btn4").click(function(){
12. $("[name='checkbox']").each(function(){//反选
13. if($(this).attr("checked")){
14. $(this).removeAttr("checked");
15. }
16. else{
17. $(this).attr("checked",'true');
18. }
19. })
20. })
21. $("#btn5").click(function(){//输出选中的值
22. var str="";
23. $("[name='checkbox'][checked]").each(function(){
24. str+=$(this).val()+"/r/n";
25. //alert($(this).val());
26. })
27. alert(str);
28. })
29. })
html代码:
[xhtml]
view plain
copy
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>louis-blog >> jQuery 对checkbox的操作</title>
6. <mce:script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js" mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></mce:script>
7. <SCRIPT LANGUAGE="JavaScript">
8. <!--
9. $("document").ready(function(){
10. $("#btn1").click(function(){
11. $("[name='checkbox']").attr("checked",'true');//全选
12. })
13. $("#btn2").click(function(){
14. $("[name='checkbox']").removeAttr("checked");//取消全选
15. })
16. $("#btn3").click(function(){
17. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
18. })
19. $("#btn4").click(function(){
20. $("[name='checkbox']").each(function(){//反选
21. if($(this).attr("checked")){
22. $(this).removeAttr("checked");
23. }
24. else{
25. $(this).attr("checked",'true');
26. }
27. })
28. })
29. $("#btn5").click(function(){//输出选中的值
30. var str="";
31. $("[name='checkbox'][checked]").each(function(){
32. str+=$(this).val()+"/r/n";
33. //alert($(this).val());
34. })
35. alert(str);
36. })
37. })
38. -->
39. </SCRIPT>
40. </HEAD>
41. <body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">
42. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">
43. <form name="form1" method="post" action="">
44. <input type="button" id="btn1" value="全选">
45. <input type="button" id="btn2" value="取消全选">
46. <input type="button" id="btn3" value="选中所有奇数">
47. <input type="button" id="btn4" value="反选">
48. <input type="button" id="btn5" value="获得选中的所有值">
49. <br /><br />
50. <input type="checkbox" name="checkbox" value="checkbox1">
51. checkbox1
52. <input type="checkbox" name="checkbox" value="checkbox2">
53. checkbox2
54. <input type="checkbox" name="checkbox" value="checkbox3">
55. checkbox3
56. <input type="checkbox" name="checkbox" value="checkbox4">
57. checkbox4
58. <input type="checkbox" name="checkbox" value="checkbox5">
59. checkbox5
60. <input type="checkbox" name="checkbox" value="checkbox6">
61. checkbox6
62. </form>
63. </div>
64. </body>
65. </HTML>
