“HERESY!” you say, “Radio buttons are for single-select items! If you want multi-select, use checkboxes!” Well, I would agree, and that is why I consider this a significant bug that ASP.NET developers need to be aware of. Here’s
the situation. If you use ASP:RadioButton controls on your WebForm, then you know that in order to get them to behave properly, that is, to define a
group in which only one of them can be selected by
the user, you use
the Group attribute and set
the same value on each one. For example: 1: <asp:RadioButton runat="server" ID="rdo1" Group="GroupName" checked="true" />
2: <asp:RadioButton runat="server" ID="rdo2" Group="GroupName" />
With this configuration,
the controls will render to
the browser as HTML Input / Type=radio tags and when
the user selects one,
the browser will automatically deselect
the other one so that only one can be selected (checked) at any time.
BUT, if you user server-side code to manipulate
the Checked attribute of these controls, it is possible to set them both to believe that they are checked.
1: rdo2.Checked = true; // Does NOT change
the Checked attribute of rdo1 to be false.
As long as you remain in server-side code,
the system will believe that both radio buttons are checked (you can verify this in
the debugger). Therefore, if you later have code that looks like this
1: if (rdo1.Checked)
2: {
3: DoSomething1();
4: }
5: else
6: {
7: DoSomethingElse();
8: }
then it will always evaluate
the condition to be true and take
the first action.
The good news is that if you return to
the client with multiple radio buttons checked,
the browser tries to clean that up for you and make only one of them really checked. It turns out that
the last one on
the screen wins, so in this case, you will in fact end up with rdo2 as checked, and if you then make a trip to
the server to run
the code above, it will appear to be working properly. However, if your page initializes with rdo2 checked and in code you set rdo1 to checked also, then when you go back to
the client, rdo2 will remain checked, again because it is
the last one and
the last one checked “wins”.
And this gets even uglier if you ever set these radio buttons to be disabled. In that case, although
the client browser renders
the radio buttons as though only one of them is checked
the system actually retains
the value of both of them as checked, and your next trip to
the server will really frustrate you because
the browser showed rdo2 as checked, but your DoSomething1() routine keeps getting executed.
The following is sample code you can put into any WebForm to test this yourself.
1: <body>
2: <form id="form1" runat="server">
3: <h1>Radio Button Test</h1>
4: <hr />
5: <asp:Button runat="server" ID="cmdBlankPostback" Text="Blank Postback" />
6:
7: <asp:Button runat="server" ID="cmdEnable" Text="Enable All" OnClick="cmdEnable_Click" />
8:
9: <asp:Button runat="server" ID="cmdDisable" Text="Disable All" OnClick="cmdDisable_Click" />
10:
11: <asp:Button runat="server" ID="cmdTest" Text="Test" OnClick="cmdTest_Click" />
12: <br /><br /><br />
13: <asp:RadioButton ID="rdoG1R1" GroupName="Group1" runat="server" Text="
Group 1 Radio 1" Checked="true" /><br />
14: <asp:RadioButton ID="rdoG1R2" GroupName="Group1" runat="server" Text="
Group 1 Radio 2" /><br />
15: <asp:RadioButton ID="rdoG1R3" GroupName="Group1" runat="server" Text="
Group 1 Radio 3" /><br />
16: <hr />
17: <asp:RadioButton ID="rdoG2R1" GroupName="Group2" runat="server" Text="
Group 2 Radio 1" /><br />
18: <asp:RadioButton ID="rdoG2R2" GroupName="Group2" runat="server" Text="
Group 2 Radio 2" Checked="true" /><br />
19:
20: </form>
21: </body>
1: protected void Page_Load(object sender, EventArgs e)
2: {
3:
4: }
5:
6: protected void cmdEnable_Click(object sender, EventArgs e)
7: {
8: rdoG1R1.Enabled = true;
9: rdoG1R2.Enabled = true;
10: rdoG1R3.Enabled = true;
11: rdoG2R1.Enabled = true;
12: rdoG2R2.Enabled = true;
13: }
14:
15: protected void cmdDisable_Click(object sender, EventArgs e)
16: {
17: rdoG1R1.Enabled = false;
18: rdoG1R2.Enabled = false;
19: rdoG1R3.Enabled = false;
20: rdoG2R1.Enabled = false;
21: rdoG2R2.Enabled = false;
22: }
23:
24: protected void cmdTest_Click(object sender, EventArgs e)
25: {
26: rdoG1R2.Checked = true;
27: rdoG2R1.Checked = true;
28: }
29:
30: protected void Page_PreRender(object sender, EventArgs e)
31: {
32:
33: }
After you copy
the markup and page-behind code into
the appropriate files. I recommend you set a breakpoint on Page_Load as well as cmdTest_Click, and add each of
the radio button controls to
the Watch list so that you can walk through
the code and see exactly what is happening. Use
the Blank Postback button to cause a postback to
the server so you can inspect things without making any changes.
The moral of
the story is: if you do server-side manipulation of
the Checked status of RadioButton controls, then you need to set ALL of
the controls in a
group whenever you want to change one.
