How to allow only one checkbox to be checked in a group of checkboxes

M

moondaddy

There are different times when I will have a group of checkboxes and need to
force only one to be checked at a time. I would also like to do this client
side and not require a postback. These checkboxes could be just a group of
check boxes across the top of a page, or could be part of a datalist or
datagrid. How do I make it so when a use clicks on one checkbox that if
another checkbox is checked, it becomes unchecked?

Also, is it possible to do this in a ie4 and ns4 compatible way?

Thanks.
 
?

=?windows-1253?Q?=C1=ED=F4=FE=ED=E7=F2?=

Use radio buttons instead. Unlike check boxes, they are mutually exclusive.

<INPUT id="r1" type="radio" value="1" name="RadioGroup" CHECKED>r1<BR />
<INPUT id="r2" type="radio" value="2" name="RadioGroup">r2<BR />
<INPUT id="r3" type="radio" value="3" name="RadioGroup">r3<BR />
<INPUT id="r4" type="radio" value="4" name="RadioGroup">r4


_____________________________________________________________
B&D Technologies
http://www.bd-tech.com
Antoni Biliardis - antoni(at)bd-tech.com

O/H moondaddy Ýãñáøå:
 
S

Steven Cheng[MSFT]

Hi Moondaddy,

As for this problem, I think Antoni's suggestion on use Radio button is
reasonable since the
<input type="radio".. > element is just design for single select items
while the
<input type="checkbox" ..> is not.

Also, we of course can implement such function on checkbox by using some
javascript. For example, we can register a "onclick" handler for each
checkbox and when a checkbox is checked, first uncheck all the other
checkboxes and then check this selected one again. Here is a simple demo
page:

==============aspx ======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>checkboxes</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SingleSelect(regex,current)
{
re = new RegExp(regex);

for(i = 0; i < document.forms[0].elements.length; i++) {

elm = document.forms[0].elements;

if (elm.type == 'checkbox') {

if (re.test(elm.name)) {

elm.checked = false;

}
}
}

current.checked = true;

}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<br/>aaaa<input type="checkbox" id="chkOne" name="chkOne"
value="aaaa" checked onclick="SingleSelect('chk',this);" />
<br/>bbbb<input type="checkbox" id="chkTwo" name="chkTwo"
value="bbbb" onclick="SingleSelect('chk',this);" />
<br/>cccc<input type="checkbox" id="chkThree" name="chkThree"
value="cccc" onclick="SingleSelect('chk',this);" />
<br/>dddd<input type="checkbox" id="chkFour" name="chkFour"
value="dddd" onclick="SingleSelect('chk',this);" />
<br/>eeee<input type="checkbox" id="chkFive" name="chkFive"
value="eeee" onclick="SingleSelect('chk',this);" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>
====================================================

Hope helps. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Get Preview at ASP.NET whidbey
http://msdn.microsoft.com/asp.net/whidbey/default.aspx
 
M

moondaddy

Thanks Steven and Antoni.

Since Antoni's solution is the simplest, I'll use it for this particular
page, however, I'll archive your sample code for later use as I know I can
use it.

Thanks again!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,816
Latest member
nipsseyhussle

Latest Threads

Top