Radio一键实现全选、反选CheckBoxList

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="iq01" title="Cancel" οnclick="deleteAll('cblSend')" />Cancel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值