checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>check test</title>
  5. </head>
  6. <body>
  7. <form name="formGroup" id="formGroup" action="#" method="post" target="_self">
  8. <table border="1" cellpadding="2" cellspacing="1" class="table_hide">
  9. <tr class="table_title">
  10. <td width="50" align="center" class="text_center">序号</td>
  11. <td width="40" align="center" class="text_center">选择</td>
  12. <td width="100" align="center"></td>
  13. <td width="100" align="center"></td>
  14. </tr>
  15. <tr>
  16. <td align="center" class="text_center">1</td>
  17. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
  18. <td align="center"></td>
  19. <td align="center"></td>
  20. </tr>
  21. <tr>
  22. <td align="center" class="text_center">2</td>
  23. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
  24. <td align="center"></td>
  25. <td align="center"></td>
  26. </tr>
  27. <tr>
  28. <td align="center" class="text_center">3</td>
  29. <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
  30. <td align="center"></td>
  31. <td align="center"></td>
  32. </tr>
  33. <tr>
  34. <td align="center">全选</td>
  35. <!-- 复选框单击方式 -->
  36. <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>
  37. <!-- 按钮方式,本质无区别 -->
  38. <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>
  39. <td align="center"></td>
  40. </tr>
  41. </table>
  42. </form>
  43. </body>
  44. <script type="text/javascript">
  45. // 选择或者反选 checkbox
  46. function CheckSelect(thisform)
  47. {
  48. // 遍历 form
  49. for ( var i = 0; i < thisform.elements.length; i++)
  50. {
  51. // 提取控件
  52. var checkbox = thisform.elements[i];
  53. // 检查是否是指定的控件
  54. if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
  55. {
  56. // 正选
  57. checkbox.checked = true;
  58. }
  59. else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
  60. {
  61. // 反选
  62. checkbox.checked = false;
  63. }
  64. }
  65. }
  66. </script>
  67. </html>

效果演示

转发!HTML 复选框 checkbox 的 JavaScript 的全选和全反选的更多相关文章

  1. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  2. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  3. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  5. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  6. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  7. 3.Android之单选按钮RadioGroup和复选框Checkbox学习

    单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...

  8. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  9. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

随机推荐

  1. 史上最全的Python电子书教程资源下载(转)

    网上搜集的,点击即可下载,希望提供给有需要的人^_^   O'Reilly.Python.And.XML.pdf 2.02 MB   OReilly - Programming Python 2nd. ...

  2. ANDROID开发之问题积累及解决方案(二)

    错误:“Binary XML file line # : Error inflating class” 原因:此异常是布局文件中有错引起的,那么返回到布局文件中看看. <?xml version ...

  3. Java基础知识系列——文件操作

    对文件进行操作在编程中比较少用,但是我最近有一个任务需要用到对文件操作. 对文件有如下操作形式: 1.创建新的文件(夹) File fileName = new File("C:/myfil ...

  4. [题解]USACO 1.3 Ski Course Design

    Ski Course Design Farmer John has N hills on his farm (1 <= N <= 1,000), each with an integer ...

  5. js中的一些容易混淆的方法!

    数组的一些方法: 1.join()和split()方法  与之相反的是split()方法:用于把一个字符串分割成字符串数组.  注意返回的数组中不包括separator本身: 提示和注释注释:如果把空 ...

  6. C# winform key value型数据如何绑定ComBox (hashtable,keyvaluepair,dictionary )

    cbUserAgent是一个combox ArrayList list = new ArrayList(); Dictionary<string, string> useragents = ...

  7. 开发Protege插件时,出现打开Protege后并不显示插件的原因

    最近跟着导师一起开发了一个Protege插件,在按照http://www.cnblogs.com/biaoyu/archive/2011/01/07/1929715.html中所述一步步进行到最后时, ...

  8. bwa用法

    一 建立索引 比对之前,需要对fasta文件构建FM-index索引:bwa index -a bwtsw hg19.fasta 生成 hg19.fasta.amb.hg19.fasta.ann.hg ...

  9. js常用方法

    若未声明,则都是js的方法 1.indexOf indexOf(str):默认返回字符串中第一次出现索引位置 的下标,没有则返回-1 indexOf(str,position):返回从position ...

  10. grunt配置太复杂?使用Qbuild进行文件合并、压缩、格式化等处理

    上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...