select only one check box

[Vasya Ivanov]

I have a following code in my ASPX:

<

 

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.

 

[Shinu]

Hello Vasya,

There are several ways to achieve the same.

• Use RadioButtons instead of CheckBoxes
• Use MutuallyExclusiveCheckBox extender

If you want the behavior with the same setup try the following client side code by subscribing the event onclick.

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.

[Vasya Ivanov]

Thanks for your responding,
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..

[Shinu]

Hello Vasya,
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

Clientside:

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.

[Vasya Ivanov]

Hi,
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

 

 

[Shinu]

Hello Vasya,

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.

[Vasya Ivanov]

Thanks so much for your help,
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>

 

 

&nbsp;

 

 

<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

[Princy]

Hi,

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.