
<
td class="TD" style="width: 32px;" valign="bottom" align="center">
<asp:CheckBox ID="CheckBoxA101S" runat="server" Height="12px" Style="position: relative"
Text=" " TextAlign="Left" Width="12px" />
</td>
<td class="TD" style="width: 31px;" valign="bottom" align="center">
<asp:CheckBox ID="CheckBoxA101U" runat="server" Height="12px" Style="position: relative"
Text=" " TextAlign="Left" Width="12px" /></td>
There are two checkboxes and user only can check one box.
How can I code that in ASPX?
Thanks so much.
7 Answers, 1 is accepted

There are several ways to achieve the same.
- Use RadioButtons instead of CheckBoxes
- Use MutuallyExclusiveCheckBox extender
javascript:
function
check(sender)
{
var
chkBox;
if
(sender.id ==
"CheckBoxA101S"
)
{
chkBox = document.getElementById(
"CheckBoxA101U"
);
}
else
{
chkBox = document.getElementById(
"CheckBoxA101S"
);
}
if
(sender.checked)
{
if
(chkBox.checked)
{
chkBox.checked =
false
;
}
}
}
Thanks,
Shinu.

but if I have multiple checkboxes for example:CheckBoxA101S,CheckBoxA101U,CheckBoxA102S,CheckBoxA102U(this is a form and might have 10 different checkboxes).
Do I have to create multiple javascript code?
Thanks so much..

You can achieve this easily by using the HTML CheckBoxes.
Here is the sample code.
MarkUp:
<
input
type
=
"checkbox"
name
=
"scripts"
id
=
"C1"
value
=
'JavaScript'
onclick
=
"check(this);"
/>JavaScript
<
input
type
=
"checkbox"
name
=
"scripts"
id
=
"C2"
value
=
'PHP'
onclick
=
"check(this);"
/>PHP
<
input
type
=
"checkbox"
name
=
"scripts"
id
=
"C3"
value
=
'HTML'
onclick
=
"check(this);"
/>HTML
function
check(sender)
{
if
(!sender.checked)
return
;
var
f = document.form1.scripts;
for
(
var
i = 0; i < f.length; i++)
{
if
(f.item(
"scripts"
, i).id == sender.id)
{
sender.checked =
true
;
continue
;
}
f.item(
"scripts"
, i).checked =
false
;
}
}
Regards,
Shinu.

I put this code into aspx and still not working:
<
script type="text/javascript">
function
check(sender)
{
if(!sender.checked)
return;
var f = document.form1.scripts;
for(vari = 0; i < document.form1.scripts.length; i++)
{
if(f.item("scripts", i).id == sender.id)
{
sender.checked =
true;
continue;
}
f.item(
"scripts", i).checked = false;
}
}
</
script>
<td class="TD" style="width: 32px;" valign="bottom" align="center">
<input type="checkbox" name="scripts" id="
"CheckBoxA101S"
value='JavaScript' style="position: relative; width: 12px; height: 12px; text-align: left;" onclick="check(this);" />
<td class="TD" style="width: 32px;" valign="bottom" align="center">
<
input type="checkbox" name="scripts" id="
"CheckBoxA101U"
value='JavaScript' style="position: relative; width: 12px; height: 12px; text-align: left;" onclick="check(this);" /
When I run my application and go to this page I was able to checked both boxes(remember if I checked one box the other box should not be checked)
Also can you tell me how can I access this checkbox in my C# code.
Thanks for your help

This behavior is because you haven't set the ID of the CheckBoxes correctly.
MarkUp:
<
input
type
=
"checkbox"
name
=
"scripts"
id
=
"CheckBoxA101S"
value
=
'JavaScript'
style="position: relative;
width: 12px; height: 12px; text-align: left;"
onclick
=
"check(this);"
/>
If you want to access the control from server side, then the MutuallyExclusiveCheckBox extender is the best choice.
Refer the following links for more on this control.
MutuallyExclusiveCheckBox Demonstration
MutuallyExclusiveCheckBox Control
Thanks,
Shinu.

I have another question.I have following code in aspx:
<
asp:Button ID="ButtonDummy" runat="server" Style="display: none; position: relative"
Text="ButtonDummy" />
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" BackgroundCssClass="modalBackground"
DropShadow="True" PopupControlID="Panel2" TargetControlID="ButtonDummy">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" BackColor="White" BorderStyle="Solid" BorderWidth="2px"
Height="192px" Style="display: none; position: relative" Width="504px">
<div>
<table style="width: 503px; line-height: normal; position: absolute; text-align: center">
<tr>
<td align="center" colspan="4" style="font-weight: bold; font-size: large; background-image: none;
color: blue; font-family: Arial">
There is ToolKit control ModalPopupExtender..What is a similar Telerik control or how can I write a code using some other Telerik control similar to this and behave exactly like this.
Thanks again for your help

You can use RadWindow to achieve your scenario.
ASPX:
<
asp:Button
ID
=
"ButtonDummy"
runat
=
"server"
Text
=
"ButtonDummy"
/>
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
OpenerElementID
=
"ButtonDummy"
Modal
=
"true"
>
<
ContentTemplate
>
<
asp:Panel
ID
=
"Panel2"
runat
=
"server"
BackColor
=
"White"
BorderStyle
=
"Solid"
BorderWidth
=
"2px"
Height
=
"192px"
Style
=
"display: none; position: relative"
Width
=
"504px"
>
<
div
>
<
table
style
=
"width: 503px; line-height: normal; position: absolute; text-align: center"
>
<
tr
>
<
td
align
=
"center"
colspan
=
"4"
style="font-weight: bold; font-size: large; background-image: none;
color: blue; font-family: Arial">
Your code
</
td
>
</
tr
>
</
table
>
</
div
>
</
asp:Panel
>
</
ContentTemplate
>
</
telerik:RadWindow
>
Regards,
Princy.