正在检测两次复选框更改

Question

我想使用checkbox来显示服务在检查时是否正在运行，如果服务未运行，则显示该服务，这是我的复选框。

<input id="controller" type="checkbox" class="switch-small" checked > Controller

然后我使用此JavaScript来捕获事件。

在下面的代码中，我想知道服务是否正在运行，因此我可以正确地更改其状态，例如，如果选中，并且用户点击它，他想停止服务，反之亦然。

var state = false;
if ( $('#controller').prop('checked') ){
  state = true;
}

但是我的代码中出现了一些问题，因为change被调用了两次而且我不知道为什么会这样，我只想被调用一次。

$(document).ready(function() {

    $('#controller').change(function () {

        if (!state){
            alert("ON");
        } else {
            alert("OFF");
        }

        if ( $('#controller').prop('checked') ){
            state = true;
        }else{
            state = false;
        }

    });
});

我的所有组件都有唯一的ID。 知道为什么会这样吗？

Answer 1

var state;
$('#controller').click( function () {
    state = this.checked;
    alert(state ? "ON" : "OFF");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<label>
    <input id="controller" type="checkbox" class="switch-small" checked="checked" />
    Controller
</label>