Any way to make a CheckBoxList behave like a RadioButton?

[MattB]

I have a CheckBoxList that under some circumstances I want to only allow
one selection, so that if you select a different item, whatever was
selected before becomes un-selected.
Any ideas on how to do this?

Ideas, and even better, examples would be appreciated!

Matt

 

[Collin Chung]

Hi Matt,

I'd use a javascript to do this, but it only works when the
RepeatLayout property is set to Flow.

On mouse-click, it resets all checkboxes in the list to unchecked, and
then checks the current item.

Here's how the CheckBoxList control should look like:

<asp:CheckBoxList id="CheckBoxList1" runat="server" RepeatLayout="Flow"
onclick="try{if(event.srcElement.type=='checkbox'){var
nodes=event.srcElement.parentNode.childNodes;for(i=0,numberOfElements=childNodes.length;i<numberOfElements;++i)if(childNodes.type=='checkbox')childNodes.checked='';}event.srcElement.checked='checked';}catch(E){}">

Alternatively, you could consider using the RadioButtonList.

 

[MattB]

Hi Matt,

I'd use a javascript to do this, but it only works when the
RepeatLayout property is set to Flow.

On mouse-click, it resets all checkboxes in the list to unchecked, and
then checks the current item.

Here's how the CheckBoxList control should look like:

<asp:CheckBoxList id="CheckBoxList1" runat="server" RepeatLayout="Flow"
onclick="try{if(event.srcElement.type=='checkbox'){var
nodes=event.srcElement.parentNode.childNodes;for(i=0,numberOfElements=childNodes.length;i<numberOfElements;++i)if(childNodes.type=='checkbox')childNodes.checked='';}event.srcElement.checked='checked';}catch(E){}">

Alternatively, you could consider using the RadioButtonList.

Thanks. I'll give it a shot.
I want to use the CheckBoxList instead of a RadioButtonList because in
many cases the user is allowed to make multiple selections. I thought
that keeping one kind of control and changing the behavior would be a
more consistent interface.

Matt

 

[Alan Silver]

I want to use the CheckBoxList instead of a RadioButtonList because in

many cases the user is allowed to make multiple selections. I thought
that keeping one kind of control and changing the behavior would be a
more consistent interface.

Actually, you will confuse the user far more by doing this than you
would if you changed the controls to radio buttons.

User subconsciously expect things to work a certain way, and if you try
and change the behaviour of standard elements, you will confuse users.
At the least, this will cause them to have to stop and think when trying
to use your site, at worst, you will confuse them enough that they will
give up and go elsewhere.

Don't underestimate this point, it is a very strong one that most people
miss. If you sit and watch non-web designers trying to use most web
sites that exist, you will be amazed at how much they struggle with poor
design choices like this.

See www.useit.com for the opinions of the web's #1 guru on usability
issues. He speaks a lot about the dangers of changing expected
behaviour.

HTH

 

[MattB]

Actually, you will confuse the user far more by doing this than you
would if you changed the controls to radio buttons.

User subconsciously expect things to work a certain way, and if you try
and change the behaviour of standard elements, you will confuse users.
At the least, this will cause them to have to stop and think when trying
to use your site, at worst, you will confuse them enough that they will
give up and go elsewhere.

Don't underestimate this point, it is a very strong one that most people
miss. If you sit and watch non-web designers trying to use most web
sites that exist, you will be amazed at how much they struggle with poor
design choices like this.

See www.useit.com for the opinions of the web's #1 guru on usability
issues. He speaks a lot about the dangers of changing expected behaviour.

HTH

Well I decided against it before seeing your reply, but this affirms my
decision.

Thanks for the input!

Matt

 

[siddharthad]

A javascript solution to make checkboxlist(with Table Layout) behave like radiobutton

The checkboxlist can be declared as:

<asp:CheckBoxList onclick="RadioList" AutoPostBack="false" ID="chkQuestion1" RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="2" runat="server" TextAlign="right">
<asp:ListItem Text="Yes" Value="0"></asp:ListItem>
<asp:ListItem Text="No" Value="1"></asp:ListItem>
</asp:CheckBoxList>

In Serverside add these attribute:
chkQuestion1.Attributes.Add("name", chkQuestion1.ClientID);
chkQuestion1.Attributes.Add("onclick", "javascript:RadioList(event);");

Add this javascript event handler in the aspx page:

function RadioList(event)
{
if(event.srcElement.type=='checkbox')
{
var childNodes = event.srcElement.parentNode.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].childNodes;
for(i =0;i<childNodes.length;++i)
{
if(childNodes.childNodes[0].type=='checkbox')
childNodes.childNodes[0].checked=false;
}
event.srcElement.checked=true;
}
}

Hope this helps. Remember this code doesn't run for Flow layout, the earlier post is best for that.

 

[siddharthad]

A more generic javascript function to handle checkboxlist irrespective of its layout

function RadioList(event)
{
if(event.srcElement.type=='checkbox')
{
var childNodes;
var tableLayout;
var childNode;

if(event.srcElement.parentNode.parentNode.parentNode.parentNode.name != undefined)
tableLayout = true;

childNodes = (tableLayout)
?event.srcElement.parentNode.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].childNodes
:event.srcElement.parentNode.childNodes;

for(i=0;i<childNodes.length;++i)
{
childNode = (tableLayout)?childNodes.childNodes[0]:childNodes;

if(childNode != undefined)
{
if(childNode.type == 'checkbox')
{
if(tableLayout)
childNodes.childNodes[0].checked=false;
else
childNode.checked=false;
}
}
}
event.srcElement.checked=true;
}
}