Javascript 复选框jQuery的意外响应

我有水平jQuery复选框。它应该在单击时显示一些文本，并在再次单击和取消选中时删除这些文本。但是，当我第一次加载页面并单击框时，什么都没有发生。然后，当我再次单击以取消选中时，将显示文本。这似乎与我的预期相反。代码如下： （我可以通过简单地反转布尔符号来解决这个问题，但我想了解为什么会发生这种情况）

选择您的餐厅类型：
素食主义者
函数onfilter（）{
如果（$（“#复选框-h-2a”）.prop（'checked'））{
document.getElementById（“hehe”）.innerHTML=“Yo there”；
}
如果（！（$（“#复选框-h-2a”）.prop（'checked'））{
document.getElementById（“hehe”）.innerHTML=“”；
}
}       

您已经在加载jQuery了，所以只需对所有内容使用jQuery即可—它更简单、工作更好，实际上jQuery的唯一缺点是必须加载它—而且您已经在这样做了。因此，我建议使用类似这样的方法：

$(function(){
  $(document).on('click', '#checkbox-h-2a', function(){
     if ( $(this).is(':checked') ) {
        // Do stuff
     }
     else{
        //Do stuff
     }
  });
});

另外，我希望您实际上正在关闭HTML中的输入元素，这只是您问题中的一个输入错误

    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"

简言之：

$(function(){

// code here

});

---

问题是，在单击标签时，复选框的选中的

未被更改，因此您必须切换逻辑（尽管看起来很奇怪）或将处理程序附加到复选框
输入的
的
onchange
事件：

<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" 
       onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>


素食主义者

.
它涉及标签的工作方式，当单击标签时，它通过
for
属性查找附加的输入元素，并尝试更改相应的属性（
checked
for checkbox，radio，…）或聚焦元素（对于文本框字段）。因此，在单击时，它首先处理/调用您的处理程序。因此问题就来了

请注意，这个答案只是解决了问题，而不是试图改进代码。
为什么要将jQuery和直接DOM API混合在一起进行DOM操作？选一个，坚持住。你知道你把它倒过来了吗？如果未选中，则innerHtml=“Yo there”Where is
@stud91-请参阅提供的答案-他们将解决您的问题，如果他们有帮助，请将其中一个标记为已接受，如果有帮助，请向上投票。标签也应绕过复选框，因为大多数用户习惯于单击标签以更改复选框，另外，我强烈建议使用所有jQuery，因为他已经在page@ScottSelby是的，但是在某些情况下，你可以把输入放在外面，这就是为什么它有
for
属性。是的-我看到了你的注释-我提出了一系列建议，因为他们对小提琴作品很陌生，我也在问题的更新中解释了原因
$(document).ready(function(){

   /// code here

});

$(function(){

// code here

});

<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" 
       onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>