Question

我有水平jQuery复选框。它应该在单击时显示一些文本，并在再次单击并取消选中时删除文本。但是，当我第一次加载页面并单击该框时，没有任何反应。然后，当我再次单击它取消选中时，文本会出现。这似乎是我所期待的相反行为。这是代码：（我可以通过简单地反转布尔符号来解决这个问题，但我想知道为什么会这样）。

<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 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

});

Answer 2

问题是在点击label时，复选框的checked尚未更改，因此您必须切换逻辑（尽管看起来很奇怪）或将处理程序附加到onchange复选框input的事件代替：

<!-- 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>

Demo

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

请注意，此答案只是解决了问题，而不是尝试改进您的代码。

复选框jQuery的意外响应

2 个答案:

编辑：

Demo