JQuery 中的 ASP.NET 单选按钮开关答案

【问题标题】：ASP.NET Radio Button Switch in JQueryJQuery 中的 ASP.NET 单选按钮开关
【发布时间】：2015-01-05 11:49:21
【问题描述】：

我在 ASP.NET 中有一个单选按钮

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

我想使用从HERE 获得的引导开关

我只想在我的单选按钮上添加“切换”效果，而不是 ASP.NET 提供的默认圆圈。

这是我所做的：
1) 在我的 aspx 页面上添加了单选按钮。如上图。
2）使用以下脚本

   <script type="text/javascript">

        $(document).ready(function () {

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

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

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


    </script>

现在的行为是这样的，如果我点击“关闭”选项，它会滑到“开启”...但是如果我点击“开启”选项，它不会回到关闭状态。有趣的是，如果我单击“是”的单选按钮文本，它就会切换。
任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery asp.net twitter-bootstrap bootstrap-switch

【解决方案1】：

当您使用$("input:radio").bootstrapSwitch(); 时，它会起作用，您不必编写单独的代码来处理click 事件。我试过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>

如果你查看你的代码，你总是在 $("input:radio").on("click"..... 中将 toggleState 设置为 true ，因为你应该首先检查 $(this).attr("checked") 是否为 true ，然后将其设置为 true ，否则将 toggleState 设置为假的。

【讨论】：