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

最新推荐文章于 2021-12-02 14:35:08 发布

xwdpepsi

最新推荐文章于 2021-12-02 14:35:08 发布

阅读量2.2k

点赞数

分类专栏： ASP.net 文章标签： javascript input object server asp function

本文链接：https://blog.youkuaiyun.com/xwdpepsi/article/details/7181829

版权

ASP.net 专栏收录该内容

16 篇文章

订阅专栏

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()");
        }

功能实现图：