Bootstrap 3 radio需要双击

Question

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

这个 post 应该可以解决我一半的问题，关于事件被触发两次： Bootstrap 3 Radio Buttons Double Toggling 但是尽我所能，浏览我的 Bootstrap JavaScript 文件，我看不到我使用的是 Bootstrap 除了版本 3.

的任何其他版本

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

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

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

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

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

Answer 1

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

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

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

解决方案：

我只是注释掉 main.js 文件中的 bootstrap-switch 行，以免失去对收音机的控制并进行最简单的使用更新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..
        }
    });
});

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

希望对您有所帮助。

Bootstrap 3 radio需要双击

Bootstrap 3 radio requires double clicking

javascript

twitter-bootstrap-3

bootstrap-switch