JavaScript 复选框切换按钮警报

Question

我正在开发 asp.net MVC-5，我使用 checkbox 添加了一个 Bootstrap 切换按钮，如下所示

我的脚本

<script src="~/Scripts/bootstrap-toggle.js"></script>
<link href="~/Content/bootstrap-toggle.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-3.1.0.min.js"></script>

我的 Razor

注意:下面的 Razor 放置在部分 View 中并在我的布局中呈现 @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true)

<fieldset style="height:60px">
    <legend style="text-align:center;  font-size:large; font-family:'Times     New Roman'; background-color:#C8E6C9; color:red">Remote On/Off</legend>
    <input type="checkbox" checked data-toggle="toggle">
</fieldset>}

我想在切换开关按钮上添加一个简单的警报，即切换到打开时会显示打开警报，切换到关闭时会显示关闭警报

我查了很多文章，但没有找到正确的答案

更新

如果在我的输入字段中添加了 id 字段，然后将其传递给 JS 脚本，如下所示，它就开始工作了

<input id="test_id" type="checkbox" checked data-toggle="toggle">
$("#test_id").on("change", function (event) {
    if ($(this).is(":checked")) {
        alert("on");
    } else {
        alert("off");
    }
});

任何帮助将不胜感激

Answer 1

您可以为复选框添加更改事件处理程序 -

$("checkbox").on("change", function(event) {
     if($(this).is(":checked")) {
        alert("on");         
     } else {
        alert("off");
     }
});