复选框的全选功能在Web开发中使用非常频繁,而实现的方法一般分为两种:客户端实现与服务器端实现。
服务器端实现需要与服务器端交互,因此效率较差。今天向大家介绍一下用脚本在客户端实现此功能的方法。
效果如图
当点击按钮或全选复选框时,上表中的所有数据被钩上。
下面是js代码:
<
script type
=
"
text/javascript
"
>
// 根据传入的checkbox的选中状态设置所有checkbox的选中状态
function selectAll(obj)
{
var allInput = document.getElementsByTagName("input");
//alert(allInput.length);
var loopTime = allInput.length;
for(i = 0;i < loopTime;i++)
{
//alert(allInput[i].type);
if(allInput[i].type == "checkbox")
{
allInput[i].checked = obj.checked;
}
}
}
</ script >
// 根据传入的checkbox的选中状态设置所有checkbox的选中状态
function selectAll(obj)
{
var allInput = document.getElementsByTagName("input");
//alert(allInput.length);
var loopTime = allInput.length;
for(i = 0;i < loopTime;i++)
{
//alert(allInput[i].type);
if(allInput[i].type == "checkbox")
{
allInput[i].checked = obj.checked;
}
}
}
</ script >
调用时:
<
input id
=
"
chk_SelectALL
"
type
=
"
checkbox
"
onclick
=
"
selectAll(this)
"
/>
全选
就可实现了。
由于是在客户端完成此效果,所以控件不能使用服务器端控件,否则无效。