引导3收音机需要双击

Question

在我的网页上，我有一个问题，需要三个可能的选择中的一个答案。但是使用引导程序3实现3个单选(按钮)，我要么不生成事件，要么生成2个事件。如果我单击任何单选按钮的命名标签(例如，"ON“或"OFF")，按钮会更改，但不会生成任何事件。但是，如果我单击单选按钮的空白处，则会在按钮更改时生成2个事件。

这篇文章应该回答了我一半的问题，关于这个事件被触发了两次：引导3单选按钮双切换，但是尽我所能地尝试，通过我的引导JavaScript文件，我看不到除了版本3之外，我还在使用任何其他版本的Bootstrap。

我还读过事件侦听器加倍的答案(解释为什么会触发两次)，但据我所见，在我的JavaScript中并不是这样。

我已经提取了我的代码，并把它放在这个小提琴上。注意，这个小提琴每次点击只产生一个事件。我还没有找到我所有的.js文件的在线网址。如果有人能帮我找到最后一个丢失的副本，我将不胜感激：(我的机器上有本地副本)

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

我知道没有完全复制这个问题并不完全有帮助，但是如果有人能帮我找到上面的javascript文件的URL，我希望这会对我有所帮助。

我期待得到一个事件，独立生成独立于其中一半的单选(按钮)，我点击。如果取消引导，每次单击时都会生成事件，但每次单击仍会生成2个事件。

Answer 1

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

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

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

关于解决办法：

我只需注释掉main.js文件中的引导开关行，以避免失去对收音机的控制，并以最简单的方式更新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..
        }
    });
});

顺便说一句，您不需要一个表单元素来确定选中的事件，开关为您创建了:)

希望这能有所帮助。