ASP.NET Radio Button Switch in JQuery

Question

I have a radio button in ASP.NET

 <asp:RadioButton ID="RadioButton2" Text="Yes" GroupName="rb" Checked="false" runat="server" />

I want to use bootstrap-switch that i got from HERE

I simply want to have the "Switching" effect on my radio buttons, instead of the default circles offered by ASP.NET.

Here is what i did:
1) Added Radio Button on my aspx page. As shown above.
2) used the following script

   <script type="text/javascript">

        $(document).ready(function () {

            $("input:radio").bootstrapSwitch();

          $("input:radio").on("click", function () {

                console.log("Clicked");
                $("input:radio").bootstrapSwitch('toggleState', true);
            });
        });


    </script>

Now the behaviour is as such that If I click on "OFF" option, it slides to "ON"... but if i click on "ON" option it doesn't move back to OFF. Interestingly, If I click on the Text of radio Button which is "YES", it then toggles.
Any help will be much appreciated.

Arindam Nayak · Accepted Answer · 2014-11-09T17:28:29.290

When you use $("input:radio").bootstrapSwitch();, it will work, you don't have to write separate code for handling click event. I have tried a Similar example.

 $('input[type="radio"]').bootstrapSwitch();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.bootstrap-switch.org/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">


<script src="http://www.bootstrap-switch.org/docs/js/bootstrap.min.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<div class="col-sm-6">
  <h3 class="h5">Example</h3>
  <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
  <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
</div>

And if you look into your code, you are always setting toggleState to true in $("input:radio").on("click"..... , where as you should first check if $(this).attr("checked") is true, then set it to true , else set toggleState to false.

ASP.NET Radio Button Switch in JQuery

1 Answers1