JavaScript checkbox toggle switch button alert

Question

I am working on asp.net MVC-5, I have added a bootstrap toggle button using checkbox like bellow

My scripts

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

My razor

Note: The bellow razor is placed in a partial view and is rendered in my layout @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>}

I want to add a simple alert on toggle switch button i.e. it will show me On alert while switching to On and Off alert while switching to off

I have searched many articles but couldn't find proper answer

Update

If have added id field in my input field and then passed it to the JS script like bellow and it's started working

<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");
    }
});

Any help would be highly appreciated

Answer 1

You can add change event handler for the checkbox -

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