您的位置：首页 > Web前端 > JavaScript

在CheckBoxList用JavaScript实现全选，反选及清空

2012-01-06 17:10 465 查看

1.首先在<head></head> 标签体中添加javascript代码，实现全选等的逻辑判断<script type="text/javascript" language="javascript">

var b=false;

function checkAllOrNo()

{

if (!b) {

//由于CheckBoxList中的每个选项属于input类型，故getElementsByTagName使用"input"为参数

for (var i = 0; i < document.getElementById("WorkplaceCheckBoxList").getElementsByTagName("input").length; i++)

{

document.getElementById("WorkplaceCheckBoxList_" + i).checked = true;

}

b=!b;

}

else

{

for (var i = 0; i < document.getElementById("WorkplaceCheckBoxList").getElementsByTagName("input").length; i++)

{

document.getElementById("WorkplaceCheckBoxList_" + i).checked = false;

}

b=!b;

}

}

function ReverseAll()

{

for (var i = 0; i < document.getElementById("WorkplaceCheckBoxList").getElementsByTagName("input").length; i++)

{

var objCheck = document.getElementById("WorkplaceCheckBoxList_" + i);

if (objCheck.checked)

objCheck.checked = false;

else

objCheck.checked = true;

}

}

</script>

2.在页面上添加两个checkbox按钮，并添加prerender事件

<asp:CheckBox ID="CheckAllCheckBox" runat="server" Text="全选/清空"
onprerender="CheckAllCheckBox_PreRender" />
<asp:CheckBox ID="CheckOtherCheckBox" runat="server" Text="反选"
onprerender="CheckOtherCheckBox_PreRender" />

3.在cs文件中为事件添加代码

protected void CheckAllCheckBox_PreRender(object sender, EventArgs e)
{
CheckAllCheckBox.Attributes.Add("onclick", "checkAllOrNo()");
}

protected void CheckOtherCheckBox_PreRender(object sender, EventArgs e)
{
CheckOtherCheckBox.Attributes.Add("onclick", "ReverseAll()");
}

功能实现图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航