【JavaScript】CheckBox复选框全选以及获取值

来源:互联网 发布:程序员自黑图 编辑:程序博客网 时间:2024/06/17 17:31
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>复选框的全选</title>
  5. </head>
  6. <body>
  7. <script language="JavaScript" type="text/JavaScript">
  8. /* 是否全选标记 */
  9. var checkedAll = false;
  10. /* 全选/取消全选
  11. * formName 所在form的name值
  12. * checkboxName checkbox的name值
  13. * 注意:所有checkbox的name值都必须一样,这样才能达到全选的效果
  14. */
  15. function selectAll(formName,checkboxName){
  16. var form = document.all.item(formName);
  17. var elements = form.elements[checkboxName];
  18. for (var i=0;i<elements.length;i++){ 
  19. var e = elements[i];
  20. if(checkedAll){
  21. e.checked = false;
  22. form.alls.checked = false;
  23. else {
  24. e.checked = true;
  25. form.alls.checked = true;
  26. }
  27. }
  28. if(checkedAll){
  29. checkedAll = false;
  30. else {
  31. checkedAll = true;
  32. }
  33. /* 检查是否有checkbox被选中
  34. * formName 所在form的name值
  35. * checkboxName checkbox的name值
  36. * 注意:所有checkbox的name值都必须一样,这样才能达到全选的效果
  37. */
  38. function checkAll(formName,checkboxName){
  39. var hasCheck = false;
  40. var form = document.all.item(formName);
  41. var elements = form.elements[checkboxName];
  42. for (var i=0;i<elements.length;i++){
  43. var e = elements[i];
  44. if(e.checked){
  45. hasCheck = true;
  46. }
  47. }
  48. return hasCheck;
  49. }
  50. /* 执行操作 */
  51. function do_action(){
  52. if (!checkAll("formName","no")){
  53. alert("没有checkbox被选中,提示用户至少选择一个!");
  54. else {
  55. alert("已有checkbox被选中,可以继续后续操作!");
  56. }
  57. </script>
  58. <form name="formName" method="get">
  59. <table id="dataList" width="200" align="center" border="1">
  60. <tr>
  61. <td><input type="checkbox" name="alls" onClick="selectAll('formName','no')" title="全选/取消全选">
  62. </td>
  63. <td align="center"> 学号 </td>
  64. <td align="center"> 姓名 </td>
  65. </tr>
  66. <tr>
  67. <td><input type="checkbox" name="no" value="001" title="选择/不选择">
  68. </td>
  69. <td> 001 </td>
  70. <td> 张三 </td>
  71. </tr>
  72. <tr>
  73. <td><input type="checkbox" name="no" value="002" title="选择/不选择">
  74. </td>
  75. <td> 002 </td>
  76. <td> 李四 </td>
  77. </tr>
  78. </table>
  79. <p align="center"><input type="button" name="actionButton" value="操作" onClick="do_action()"></p>
  80. </form>
  81. </body>
  82. </html>
  83. //这是在java代码中获取checkbox的值
  84. String type = "";
  85. String[] type1 = request.getParameterValues("checkbox1");
  86. for (int i = 0; i < type1.length; i++) {
  87.    type += type1[i] + ",";
  88. }
  89. System.out.println(type);
原创粉丝点击