在批量处理列表数据时，往往会用到 CheckBox 的全选与取消全选，虽然她的实现原理很简单，但是对新手来说还是有些难度，本文介绍的方法，触发条件独立，可以全选或取消全选指定 name 的 CheckBox ， 同一页面可以有多组供全选的 CheckBox ，功能健全，通用性较强。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
-
-
<script type=
"text/javascript">
-
<!--
-
function checkAll
(
name
)
-
{
-
var el = document.
getElementsByTagName
(
'input'
);
-
var len = el.
length;
-
for
(
var i=
0; i<len; i++
)
-
{
-
if
(
(el
[i
].
type==
"checkbox"
) &&
(el
[i
].
name==
name
)
)
-
{
-
el
[i
].
checked =
true;
-
}
-
}
-
}
-
function clearAll
(
name
)
-
{
-
var el = document.
getElementsByTagName
(
'input'
);
-
var len = el.
length;
-
for
(
var i=
0; i<len; i++
)
-
{
-
if
(
(el
[i
].
type==
"checkbox"
) &&
(el
[i
].
name==
name
)
)
-
{
-
el
[i
].
checked =
false;
-
}
-
}
-
}
-
//-->
-
</script>
-
用法示例：
HTML:
-
-
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
-
<input type="checkbox" name="test" value="a" /> a
-
<input type="checkbox" name="test" value="b" /> b
-
<input type="checkbox" name="test" value="c" /> c
-
<input type="checkbox" name="test" value="d" /> d
-
<input type="checkbox" name="test" value="e" /> e
-
<input type="checkbox" name="test" value="f" /> f
-
<input type="checkbox" name="test" value="g" /> g
-
-
<br />
-
-
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关
-
<input type="checkbox" name="num" value="1" /> 1
-
<input type="checkbox" name="num" value="2" /> 2
-
<input type="checkbox" name="num" value="3" /> 3
-
-
<br />
<br />
-
-
<input type="button" value="选择所有的字母" onclick="checkAll('test')" />
-
<input type="button" value="清空选中的字母" onclick="clearAll('test')" />
-
-
<br />
<br />
-
-
<input type="button" value="选择所有的数字" onclick="checkAll('num')" />
-
<input type="button" value="清空选中的数字" onclick="clearAll('num')" />
扫一扫
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
