Javascript Bootstrap 3收音机需要双击

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

这篇文章应该回答了我一半的问题，关于事件被触发两次： 但是，尽管我可能尝试，通过查看我的引导JavaScript文件，我看不到除了版本3之外，我正在使用任何其他版本的引导

我也读过事件监听器被加倍的答案（解释了为什么它们被触发两次），但就我所见，在我的JavaScript中并非如此

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

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

---

我希望得到一个独立于我点击的单选按钮的一半而可靠生成的事件。如果取消引导，每次单击都会生成事件，但每次单击仍会生成两个事件。

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

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

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

对于解决方案：

我只是注释掉main.js文件中的bootstrap开关行，以避免失去对收音机的控制，并且为了最简单的使用，更新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>

顺便说一句，您不需要表单元素来确定选中的事件，switcher为您制作了它：）

---

希望这能有所帮助。

如果没有产生问题的例子，帮助找到答案将是一个挑战。这些可能是你正在寻找的库Highlight JS Bootstrap Switch Bootstrap Slider@daddygames谢谢，帮我找到了除2个脚本以外的所有脚本。我已经相应地更新了帖子，还有jsfiddle。你能使用stackblitz.com吗/“>stackblitz.com了解您的问题所在？您可以创建一个javascript空白项目，并将main.js文件添加到@SeyhmusGokcen优秀网站！我在这里添加了代码：虽然我不明白为什么会出现

$is not defined

错误，尽管已经包含（并上传了）我的jquery文件…？@PhilPhil实际上stackblitz在ES6上运行，您不能像您尝试的那样导入jquery:）仅供参考，我恢复了一个新的stackblitz来描述使用jquery的ES6：谢谢！我现在可以得到想要的行为了。不过，我并没有关注所有的细节，即当您编写：

我只是注释了main.js文件中的bootstrap开关行

您到底遇到了什么？（我看不出我是如何让听众加倍的）。我也没有main.js文件，我的意思是main.js文件是bootstrap开关/main.js，它位于您之前创建的stackblitz中的js文件夹下。我不知道，这是否是您的文件，但实际上您不需要在index.html文件中使用它。当您将其与index.js文件一起使用时，即切换收音机，这会导致事件加倍；一个在main.js中，另一个在index.jsah中，现在我明白你的意思了。非常感谢。

<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>

$( 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..
        }
    });
});