Question

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

此帖子应该回答我的一半问题，该事件被两次触发： Bootstrap 3 Radio Buttons Double Toggling 但是，请尝试通过Bootstrap JavaScript文件进行尝试，除了版本3，我看不到我正在使用其他任何版本的Bootstrap。

我还阅读了事件侦听器加倍的答案（解释了为什么两次触发它们的原因），但就我所知，这不是我的JavaScript中的情况。

我已经提取了代码并将其放在此jsfiddle上。请注意，该小提琴每次点击只会产生1个事件。我无法找到所有.js文件的在线URL。如果有人能帮助我找到最后一个丢失的容器，我将不胜感激：（我的计算机上有本地副本）

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

我知道它不能完全复制问题并不完全有帮助，但是如果有人可以帮助我找到上述javascript文件的URL，则有望对我有所帮助。

我希望获得1个事件的可靠生成，而与单击哪个单选按钮（按钮）无关。如果我不使用引导程序，则每次单击都会生成事件，但是每次单击仍然会生成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..
        }
    });
});

顺便说一句，您不需要用于确定已检查事件的表单元素，切换台就为您完成了它：）

希望这会有所帮助。

Bootstrap 3收音机需要双击

1 个答案: