HTML 复选框 checkbox 的 JavaScript 的全选和全反选
2013-09-30 11:16
519 查看
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下:
效果演示
Q群讨论 236201801
.
<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>
效果演示
Q群讨论 236201801
.
相关文章推荐
- window.jsp 获取父窗体内容并且 点击退出时候 刷新父窗体,含有trim方法
- JavaScript的document和window对象详解
- libj 0.8.2 发布,Java/JavaScript API 的 C++ 实现
- ExtJs学习篇---OA系统主窗体设计
- XML DOM学习笔记(JS)
- JS获取当日当周当年以及某日某月某年
- jstl 获取字符串长度、字符串操作
- JS实现一些日期的比较
- javascript 闭包
- js过滤(去除)富文本编辑器中的html标签和换行回车等标记的正则表达式
- jsp text 标签设置只允许输入数字
- js 输入int类型数字后自动在后面加.00,输入double型保留小数点后两位
- javascript ==和===的区别
- Js事件大全
- javascript function new this
- [转载]js正则表达式/replace替换变量方法
- js获取鼠标位置(兼容ie和火狐)
- JavaScript世界的一等公民 - 函数
- [转] js 事件冒泡 阻止
- javascript中模拟java类