javascript - Bootstrap 3 radio 需要双击

Question

在我的网页上，我有一个问题，需要从 3 个可能的选项中选择一个答案。但是使用 Bootstrap 3 实现 3 个单选按钮(按钮)，我要么没有生成任何事件，要么生成 2 个事件。如果我单击任何单选按钮的命名标签(例如“ON”或“OFF”)，按钮会发生变化，但不会生成任何事件。但是，如果我单击单选按钮的空白部分，当按钮更改时会生成 2 个事件。

这篇文章应该回答我的一半问题，即事件被触发两次: Bootstrap 3 Radio Buttons Double Toggling但尽我所能，浏览我的 Bootstrap JavaScript 文件，我看不到我正在使用除版本 3 之外的任何其他版本的 Bootstrap。

我还阅读了事件监听器加倍的答案(解释了为什么它们被触发两次)，但据我所知，我的 JavaScript 中的情况并非如此。

我已经提炼了我的代码并将其放在这个 jsfiddle 上。请注意，此 fiddle 每次点击仅生成 1 个事件。我无法找到所有 .js 文件的在线 URL。如果有人能帮我找到最后丢失的一个，我将不胜感激:(我的机器上有本地副本)

https://fiddle.jshell.net/_display/js/bootstrap-switch/main.js

我知道它没有完全复制问题并不完全有帮助，但如果有人可以帮助我找到上述 javascript 文件的 URL，那应该会对我有所帮助。

我希望独立于我单击的单选按钮(按钮)的哪一半而可靠地生成 1 个事件。如果我取消 Bootstrap ，每次点击都会生成事件，但每次点击仍然会生成 2 个事件..

Answer 1

你只需调用引导开关两次； main.js 文件中的一个为；

$("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();

您在 stackblitz 上为每个单选按钮制作的 index.js 中的第二个。因此，当您尝试切换 radio 时，更改事件会触发两次。

解决方案:

我只是注释掉 ma​​in.js 文件中的 bootstrap-switch 行，以免失去对 radio 的控制，并为了最简单的用法更新 index.html和 index.js 文件如下；

Index.html

<table class="overall-table" align="center">
   <thead></thead>
   <tbody>
     <tr>
        <td><th>Choice: None / Add / Dis:&nbsp;</th></td>
        <td></td>
        <td>
           <input id="cbox1" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="true" value="none">
           <input id="cbox2" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="add">
           <input id="cbox3" name="GroupedSwitches" class="bootstrap-switch" type="radio" data-off-text="OFF" data-on-text="ON" checked="false" value="dis">
        </td>
      </tr>
   </tbody>
</table>

Index.js

$( document ).ready(function()
{
    $(".bootstrap-switch").bootstrapSwitch({
        'size': 'midi',
        'onSwitchChange': function(event, state){
            console.log("event", event);
            console.log("state", state);
            console.log("this", this); //this mean the checked radio in here
            console.log("checked radio value", $(this).val());
            // Do your logic in here according to the value 
            // if..else..
        }
    });
});

顺便说一句，您不需要表单元素来确定选中的事件，切换器已经为您做好了:)

希望这有帮助。