javascript - 复选框 jQuery 的意外响应

Question

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

<form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Select your type of Restaurant:</legend>
    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
    <label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
    </fieldset>
</form>

<script>
function onfilter(){

if ($("#checkbox-h-2a").prop('checked')){

    document.getElementById("hehe").innerHTML = "Yo there";
}

if (!($("#checkbox-h-2a").prop('checked'))){
    document.getElementById("hehe").innerHTML = "";
}
}       
</script>

Answer 1

您已经加载了 jQuery ，因此只需使用 jQuery 即可完成所有操作 - 它更容易，效果更好，实际上 jQUery 的唯一缺点是必须加载它 - 并且您已经这样做了。所以我建议使用这样的东西:

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

另外，我希望您实际上关闭了 HTML 中的 input 元素，这只是您问题中的拼写错误

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

尝试:

<fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Select your type of Restaurant:</legend>
   <label for="checkbox-h-2a" >Vegetarian
      <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
   </label>
</fieldset>

看看标签如何围绕复选框？您还可以使用我提供的 jQuery 摆脱 HTML 中的内联函数

编辑:

2 个问题 - 您选择了 jQuery 1.6，对您来说 .on() 您需要更新的版本，如果您必须使用旧的 jQuery，请告诉我，

另一个问题是所有 jQuery 代码都必须包含在

中

$(document).ready(function(){

   /// code here

});

或简称:

$(function(){

// code here

});