使用JavaScript实现CheckBoxList单选两种方法
有人问,既然RadioButtonList可以实现单选,哪么为什么还要用CheckBoxList实现单选呢?这样做除去费时以外好像没有什么“好处”;但是有时用RadioButtonList实现单选不太合适。例如:我是用户,我选择其中一项后,又不想选择其中一项怎么办?而且那个RadioButtonList怎么看都不顺眼,确实有点丑。好了废话不说了,实现CheckBoxList单选的代码如下:
方法1:
此方法适用在竖向排列情况下。
方法2:
此方法适用于横向排列,且指定了RepeatColumns情况。
方法1:
1
function CheckSelect()
2
{
3
var tb = document.getElementById("ctl00_ContentPlaceHolder1_chkYear");
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
for(var i=0;i < tb.rows.length;i++)
6
{
7
var chk = tb.rows[i].firstChild.firstChild;
8
alert(chk == event.srcElement);
9
if(chk != event.srcElement)
10
{ chk.checked = false;}
11
}
12
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
此方法适用在竖向排列情况下。
方法2:
1
function CheckSelect()
2
{
3
var tb = document.getElementById("CheckBoxList1");
4
for(var i=0;i < tb.rows.length;i++)
5
{
6
for(var j =0; j < tb.rows[i].cells.length; j++)
7
{
8
var chk = tb.rows[i].cells[j].firstChild;
9
if(chk!= null && chk != event.srcElement)
10
{
11
chk.checked = false;
12
}
13
}
14
}
15
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
此方法适用于横向排列,且指定了RepeatColumns情况。