RadioButton toggle programatically client-side

[JP]

Hi,

I want to toggle a RadioButton client-side. If I use .set_checked(true), the previously checked RadioButton (same group) is still checked. If I use .click(), nothing happens (it returns false). How can I toggle a RadioButton programatically client-side so that the previously toggled buttons gets unchecked?

Thanks!

[Princy]

Hi,

One suggestion is that you can check the state of RadButton and set the values accordingly as follows.

ASPX:

<script type="text/javascript">
 function OnClientClicked(sender, args)
 {
  var btn = $find("<%=btnToggle1.ClientID %>");
  if (btn.get_checked())
  {
   btn.set_checked(false);
  }
  else
  {
   btn.set_checked(true);
  }
 }
</script>

Thanks,
Princy.

[JP]

Hi Princy,

that will indeed toggle the respective button, but the button which is currently checked will remain checked (which is simply wrong when using radio buttons).

My current approach is to uncheck all radio buttons and then to check the button which needs to be checked. But I think there must be a much better approach.

[Princy]

Hi,

One suggestion is that you can set Groupname for Radbutton for user inputs and set the values as follows while setting state from javascript as follows.

ASPX:

<telerik:RadButton ID="btnToggle1" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>
<telerik:RadButton ID="btnToggle2" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>
<telerik:RadButton ID="btnToggle3" runat="server" GroupName="Toggle" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>

JS:

<script type="text/javascript">
    function OnClientClicked(sender, args)
    {
        var btn1 = $find("<%=btnToggle1.ClientID %>");
        var btn2 = $find("<%=btnToggle2.ClientID %>");
        var btn3 = $find("<%=btnToggle3.ClientID %>");
        if (btn1.get_checked())
        {
            btn1.set_checked(false);
        }
        else
        {
            btn1.set_checked(true);
            btn2.set_checked(false);
            btn3.set_checked(false);
        }
    }
</script>

Hope this helps.

Thanks,
Princy.

[Slav]

Hello Jan-Patrick,

Indeed, currently the set_checked method does not uncheck other radio RadButtons with the same GroupName. This problem is reported to our developers, although I cannot provide a firm estimate when it will be fixed. You can track the status of the issue via the PITS Item I have logged.

For the time being I would suggest manually clearing the radio buttons when you use set_checked, which you have already done.

I have added Telerik points to your account as a token of gratitude for bringing this to our attention.

Kind regards,
Slav
the Telerik team