复选框输入，按钮设置为不再触发“更改”。事件

Question

我正在尝试将复选框实现为按钮，如下所述：

https://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

我正在尝试听取底层复选框的更改事件，以便我可以执行foo（），但是事件没有触发，请参阅我的jsFiddle：

Fiddle example

这是我的代码：

 <div class=''> 
   <div class="hideComplete btn-group" data-toggle="buttons" >
     <label class="btn btn-primary btn-sm" id="hideCompleteLabel">Hide completed
        <input type="checkbox" id="hidecomplete"/>
         </label>
   </div>
 </div>
<script>
    $('#hidecomplete').on('change', function () {
        if ($(this).is(':checked')) {
            alert("I'm checked")
        } else {
           alert("I'm not checked")
        }

    });
</script>

Answer 1

<强> Working fiddle

你没有在你的小提琴中包含jQuery库，所以只需添加它就可以使用相同的代码使小提琴正常工作：

$('#hidecomplete').on('change', function () {
  if ($(this).is(':checked')) {
    alert("I'm checked")
  } else {
    alert("I'm not checked")
  }
});

注意：请检查控制台是否有错误，因此您可能会注意到：

  

未捕获的ReferenceError：$未定义

希望这有帮助。