`

jquery 操作 checkbox 获取选择的checkbox值 全选 全清checkbox

jQueryJavaScriptXHTMLHTMLBlog 
阅读更多
  1. jquery 操作 checkbox 获取选择的checkbox值 全选 全清checkbox
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head>    
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
  6. <title>louis-blog >> jQuery 对checkbox的操作</title>    
  7. <script type='text/javascript' src="../jquery.js"></script>    
  8. <SCRIPT LANGUAGE="JavaScript">    
  9. <!--    
  10. $("document").ready(function(){    
  11. $("#btn1").click(function(){    
  12. $("[name='checkbox']").attr("checked",'true');//jquery全选checkbox    
  13. })    
  14. $("#btn2").click(function(){    
  15. $("[name='checkbox']").removeAttr("checked");//jquery取消全选    checkbox 
  16. })    
  17. $("#btn3").click(function(){    
  18. $("[name='checkbox']:even").attr("checked",'true');//jquery选中所有奇数    checkbox 
  19. })    
  20. $("#btn4").click(function(){    
  21. $("[name='checkbox']").each(function(){//反选 checkbox    
  22. if($(this).attr("checked")){    
  23. $(this).removeAttr("checked");    
  24. }    
  25. else{    
  26. $(this).attr("checked",'true');    
  27. }    
  28. })    
  29. })    
  30. $("#btn5").click(function(){//输出选中的值   checkbox  
  31. var str="";    
  32. $("[name='checkbox']:checked").each(function(){    
  33. str+=$(this).val()+"\r\n";    
  34. //alert($(this).val());    
  35. })    
  36. alert(str);    
  37. })    
  38. })    
  39. //var tempLength = $("[name='action']:checked").length;jquery 用户选择的个数
  40. -->    
  41. </SCRIPT>    
  42. </HEAD>    
  43. <body style="text-align:center;margin: 0 auto;font-size: 12px;">    
  44. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">    
  45. <form name="form1" method="post" action="">    
  46. <input type="button" id="btn1" value="全选">    
  47. <input type="button" id="btn2" value="取消全选">    
  48. <input type="button" id="btn3" value="选中所有奇数">    
  49. <input type="button" id="btn4" value="反选">    
  50. <input type="button" id="btn5" value="获得选中的所有值">    
  51. <br><br>    
  52. <input type="checkbox" name="checkbox" value="checkbox1">    
  53. checkbox1    
  54. <input type="checkbox" name="checkbox" value="checkbox2">    
  55. checkbox2    
  56. <input type="checkbox" name="checkbox" value="checkbox3">    
  57. checkbox3    
  58. <input type="checkbox" name="checkbox" value="checkbox4">    
  59. checkbox4    
  60. <input type="checkbox" name="checkbox" value="checkbox5">    
  61. checkbox5    
  62. <input type="checkbox" name="checkbox" value="checkbox6">    
  63. checkbox6    
  64. </form>    
  65. </div>    
  66. </body>    
  67. </HTML>   
分享到：
| 圣诞节起源|圣诞节
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics