js实现checkbox的全选和反选
2016-03-02 15:47
656 查看
<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>
<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>
相关文章推荐
- C#跨平台调用接口(URL传参GET调用和Post Json传参调用)
- javascript笔记——正则表达式学习笔记
- html js和css分别解决字数超过限制用省略号代替
- js写的替换字符串(相当于js操作字符串的一个练习)
- Javascript的setTimeout详细用例
- JavaScript基础
- javascript实现倒计时程序
- js中有趣的闭包(closure)
- JSPatch 常见问题
- JS 筛选出1-100间的素数
- CEF JS与browser进程间的异步通信
- 常用JS脚本
- HTML5的兼容问题以及调用js文件的方法
- Extjs下拉列表树形图
- java和JavaScript 正则区别
- 编写高质量JavaScript代码的基本要点
- JS基础(一)
- JavaScript 的原型对象 Prototype
- JS获取当前脚本文件的绝对路径
- JS核心知识点:DOM\BOM\EVENT