javascript - 如何使用引导切换来调用函数?

标签 javascript html css toggle bootstrap-4

我使用 Bootstrap 创建了一个切换开关。其代码如下:

<label >
  Automatic Refresh:
</label>
<input class="pull-right" data-size="mini" type="checkbox" data-
toggle="toggle">

在我的应用程序中,我想在按钮为“打开”时调用自动刷新功能,并在切换按钮为“关闭”时关闭自动刷新。 出于实验目的,我将分别使用 setInterval() 和clearInterval() 来切换打开和关闭。 切换打开时应运行的代码如下:

var int = setInterval(function(){ alert("Hello"); }, 1000);

当切换设置为“关闭”时应运行的代码如下:

clearInterval(int);

如何在单击切换时进行函数调用? 我的切换按钮看起来像这样 WhenToggle is On When Toggle is Off

最佳答案

您可以使用 onchange 事件。

在此示例中,我为您的复选框提供了一个 ID,并使用它来绑定(bind) onchange 事件(还有其他选项):

<input id="data-toggle" class="pull-right" data-size="mini" type="checkbox" data-
toggle="toggle">

Javascript:

document.getElementById('data-toggle').onchange = function(e){

        if(e.target.checked) {
            //Toggle is on
        } else {
            //Toggle is off
        }
};

关于javascript - 如何使用引导切换来调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47296582/

相关文章:

javascript - 使用 RaphaelJS 嵌入 SVG

javascript - Internet Explorer 11 中 AngularJS v1.3.20 出现 InvalidStateError

javascript - 如何删除 Node 本地存储中的所有配额?

javascript - 识别列表项索引 - 哪种方法更好?

css - 如何使用调整大小栏处理调整大小事件?

jquery - 如何将前两个图像放在一列和其余两列上?

css - IE8 不在视口(viewport)下方显示渐变

javascript - 如何将此代码转换为链式 promise ?

javascript - 使用 jscript 检测操作系统

html - 用于阅读 HTML 中替代文本(例如罗马数字)的 ARIA 属性