复选框输入，样式为按钮不再触发“更改”事件答案

【问题标题】：Checkbox input, styled as a button is no longer triggering the 'change' event复选框输入，样式为按钮不再触发“更改”事件
【发布时间】：2017-01-05 09:19:45
【问题描述】：

我正在尝试将复选框实现为此处所述的按钮：

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>

【问题讨论】：

如果您将 jQuery 添加到小提琴中，那么它将起作用：jsfiddle.net/fzyhos2v
您检查过控制台错误吗？而且你确定文件中加载了 jQuery 库吗？

标签： javascript jquery html checkbox

【解决方案1】：

Working fiddle.

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

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

注意：请检查控制台是否有错误，以便您注意到：

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

希望这会有所帮助。

【讨论】：