Radio一键实现全选、反选CheckBoxList

最新推荐文章于 2024-03-22 14:31:43 发布

loveheronly

最新推荐文章于 2024-03-22 14:31:43 发布

阅读量3.4k

点赞数

分类专栏： asp.net-- Web 文章标签： input function div string 数据库 server

本文链接：https://blog.csdn.net/loveheronly/article/details/6712233

版权

asp.net-- Web 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

CheckBoxList有时候绑定数据库的数据很多的时候，我们要选择的时候，一个一个地去选择，有点费事，不方便。其实我们可以用Radio一键实现全选、反选CheckBoxList的内容，重要的是给用户制造方便。

1.这是CheckBoxList初始化的数据

2.按全选择的图

3.按取消选择的图

4.反选前的数据

5.反选后的数据

6.实现的代码的js如下：checkBoxList.js文件如下

function checkAll(CheckBoxList) {
    var c = document.getElementById(CheckBoxList);
    for (var i = 0; i < c.getElementsByTagName("input").length; i++) {
        var dd = CheckBoxList +"_"+ i;
        var cc = document.getElementById(dd);
        cc.checked = true;
    }
}

function deleteAll(CheckBoxList) {
    var c = document.getElementById(CheckBoxList);
    for (var i = 0; i < c.getElementsByTagName("input").length; i++) {
        var dd = CheckBoxList + "_" + i;
        var cc = document.getElementById(dd);
        cc.checked = false;
    }
}

function ReverseAll(CheckBoxList) {
    var c = document.getElementById(CheckBoxList);
    for (var i = 0; i < c.getElementsByTagName("input").length; i++) {
        var dd = CheckBoxList + "_" + i;
        var objCheck = document.getElementById(dd);
        if (objCheck.checked)
            objCheck.checked = false;
        else
            objCheck.checked = true;
    }
}

7.引用改js文件后的页面前台如下

        <div class="div_Room">
            <input type="radio" name="iq01" title="Select All" οnclick="checkAll('cblSend')" />Select All       
                            <input type="radio" name="iq01" title="Cancel" οnclick="deleteAll('cblSend')" />Cancel       
                            <input type="radio" name="iq01" title="Inverse" οnclick="ReverseAll('cblSend')" />Inverse
                            <br />
                            <asp:CheckBoxList ID="cblSend" runat="server" RepeatDirection="Horizontal" CellPadding="10"
                                RepeatColumns="10">
                            </asp:CheckBoxList>
       </div>

8.可以用以下方法来获得CheckBoxList 选择的值

for (int i = 0; i < cblSend.Items.Count; i++)
            {
                if (cblSend.Items[i].Selected)
                {
               string str;
                str= cblSend.Items[i].Text;

}