This is a migrated thread and some comments may be shown as answers.

select only one check box

7 Answers 139 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Vasya Ivanov
Top achievements
Rank 1
Vasya Ivanov asked on 22 Feb 2011, 05:56 PM
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.

 

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 23 Feb 2011, 05:56 AM
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.
0
Vasya Ivanov
Top achievements
Rank 1
answered on 23 Feb 2011, 07:47 PM
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..
0
Shinu
Top achievements
Rank 1
answered on 24 Feb 2011, 10:47 AM
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.
0
Vasya Ivanov
Top achievements
Rank 1
answered on 24 Feb 2011, 07:56 PM
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

 

 

0
Shinu
Top achievements
Rank 1
answered on 25 Feb 2011, 08:21 AM
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.
0
Vasya Ivanov
Top achievements
Rank 1
answered on 25 Feb 2011, 03:53 PM
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

0
Princy
Top achievements
Rank 1
answered on 15 Oct 2012, 08:34 AM
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.
Tags
General Discussions
Asked by
Vasya Ivanov
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Vasya Ivanov
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Share this question
or