单击 Bootstrap 切换时调用函数（复选框）答案

【问题标题】：Call function on click on Bootstrap toggle (checkbox)单击 Bootstrap 切换时调用函数（复选框）
【发布时间】：2019-04-23 16:17:57
【问题描述】：

当我单击复选框text_mode 时，我想调用一个函数updateText()。我试过使用onClick="updateText()"，但没有用。我已经阅读了一些关于类似问题的 cmets，但所有答案都是使用 jQuery，我可以不使用任何库来完成吗，因为这个项目的所有 js 代码都是在没有任何库的情况下完成的？

这是复选框：

<label class="checkbox-inline">
   <input type="checkbox" checked data-toggle="toggle" data-size="mini" data-onstyle="default" id="text_mode" onclick="updateText()">
</label>

【问题讨论】：

您可以使用onchange="updateText()" 事件处理程序
如果您使用的是 Bootstrap，我 99% 确定您已经加载并准备好使用 jQuery。
Fire an event on input.checked=true/false _without_ jQuery的可能重复
是的，没错，但在 updateText() 函数的整个代码（以及整个 js 文件）中，我使用的是纯 js，因此仅将 jquery 用于一个函数并不好。

标签： javascript html checkbox bootstrap-4

【解决方案1】：

使用onchange 事件

<label class="checkbox-inline">
    <input type="checkbox" checked ... onchange="updateText()"> Braille
</label>

无论单击复选框，它都会执行它。所以如果你触发了标签，它也会被执行。

【讨论】：

【解决方案2】：

试试这个：

document.getElementById('text_mode').addEventListener('click', function(){
	console.log('updateText executed')
});

<label class="checkbox-inline">
   <input type="checkbox" checked data-toggle="toggle" data-size="mini" data-onstyle="default" id="text_mode"> Braille
</label>

【讨论】：

【解决方案3】：

在 3.5 版中，同样的问题。向库添加了事件调用：

$(document).on('touch.bs.toggle click.bs.toggle', 'div[data-toggle^=toggle]', function (e) {
    var $checkbox = $(this).find('input[type=checkbox]')
    $checkbox.bootstrapToggle('toggle')
    $checkbox.trigger("click")    // <!-- Added line
    e.preventDefault()
})

我的问题解决了。

【讨论】：