转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选，代码很简单，全部代码如下：
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>check test</title>
- </head>
- <body>
- <form name="formGroup" id="formGroup" action="#" method="post" target="_self">
- <table border="1" cellpadding="2" cellspacing="1" class="table_hide">
- <tr class="table_title">
- <td width="50" align="center" class="text_center">序号</td>
- <td width="40" align="center" class="text_center">选择</td>
- <td width="100" align="center"></td>
- <td width="100" align="center"></td>
- </tr>
- <tr>
- <td align="center" class="text_center">1</td>
- <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
- <td align="center"></td>
- <td align="center"></td>
- </tr>
- <tr>
- <td align="center" class="text_center">2</td>
- <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
- <td align="center"></td>
- <td align="center"></td>
- </tr>
- <tr>
- <td align="center" class="text_center">3</td>
- <td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
- <td align="center"></td>
- <td align="center"></td>
- </tr>
- <tr>
- <td align="center">全选</td>
- <!-- 复选框单击方式 -->
- <td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>
- <!-- 按钮方式，本质无区别 -->
- <td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="选/反选"></td>
- <td align="center"></td>
- </tr>
- </table>
- </form>
- </body>
- <script type="text/javascript">
- // 选择或者反选 checkbox
- function CheckSelect(thisform)
- {
- // 遍历 form
- for ( var i = 0; i < thisform.elements.length; i++)
- {
- // 提取控件
- var checkbox = thisform.elements[i];
- // 检查是否是指定的控件
- if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
- {
- // 正选
- checkbox.checked = true;
- }
- else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
- {
- // 反选
- checkbox.checked = false;
- }
- }
- }
- </script>
- </html>
效果演示
转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选的更多相关文章
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 复选框(checkbox)、单选框（radiobox）的使用
复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
- php 判断复选框checkbox是否被选中
php 判断复选框checkbox是否被选中 复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...
- jquery判断复选框checkbox是否被选中
jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');
- 3.Android之单选按钮RadioGroup和复选框Checkbox学习
单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...
- Jquery操作复选框(CheckBox)的取值赋值实现代码
赋值 复选框 CheckBox 遍历 取值 1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
随机推荐
- javascript的数值转换
在javascript中数值转换,最要的一点是函数第一个字母必须要大写.js中的函数有string字符型.number数值型.null空型.boolean布尔型.undefined未定义. 具体的转换 ...
- java工程笔记
start.sh #TITLE=jetty DEPLOY_PATH=$(cd $()/../ && pwd) export DEPLOY_PATH CLASSPATH=${CLASSP ...
- loadrunner-VUserGen录制脚本及回放时注意的问题
乱码问题 1.1录制过程中的乱码(因为本机系统的编码格式跟被测系统的编码格式不一致导致): 1.2运行时的乱码(录制后的脚本编码格式跟被测系统的编码格式不一致导致): 解决:1.Tools-Recor ...
- QuickHit快速击键小程序 --S2.4.5
我们现在要做一个项目 一个小小的程序 叫做快速击键 很明了的目的 就是在规定时间内,每次出现一组字母的组合,这个字母只能在DFJK中生成 然后输入相应的文字,按回车 自动判断输入的是否正确 在规定时间 ...
- 读《UNIX编程艺术》一感
我记得早在2006年的时候就开始频繁使用awk做文本处理方面的工作,07年的时候周围有人用perl,我还感到很不解,觉得写得很复杂,没有awk one liner 那么方便和神奇.一直在了解awk的具 ...
- Reverse链表 非递归实现
#include<iostream> struct node{ int payload; node* next; }; void bianli(node* head){ node* ite ...
- Android开发工具全面转向Android Studio(1)——准备开发环境
工欲善其事必先利其器,本文适合Android新手以及用过Eclipse而没用过Android Studio开发Android的老手,众所周知,谷歌是不会再维护和开发ADT了,旧的ADT已经是完全不能渲 ...
- Win7(32bit)下Qt5.5.0和OpenCV2.4.9环境的搭建
之前一直基于Windows平台(Win 7 32bit)使用VS2010做OpenCV的开发,现在开始学习在Windows 下使用Qt做OpenCV的开发.本文主要讲述Windows平台下(Win 7 ...
- VS2012开发工具BUG
发现VS2012开发工具 新建立项目名称长度限制的一个bug, 向导方式名称长度限制56个,但建立好的项目名称长度是可以改的很长很长. 也有想是不是生成程序集的名称会有限制,同样这里生成程序集名称,及 ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...