复选框输入(样式为按钮)不再触发'change'事件

Question

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

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

我正在尝试侦听底层复选框的更改事件，以便我可以执行 foo（），但是该事件没有触发，请在此处查看我的 jsFiddle：

小提琴示例

这是我的代码：

 <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

工作小提琴。

您没有在小提琴中包含jQuery库，因此只需添加它即可使小提琴使用相同的代码正常工作：

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

注意：请检查控制台中的错误，以便您可能会注意到：

未捕获的引用错误： $ 未定义

希望这有帮助。