复选框jQuery出现意外响应

Unexpected response for checkbox jQuery

本文关键字：意外 响应 jQuery 复选框      更新时间：2023-09-26

我有水平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>

您已经在加载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
});

问题是在单击label时，复选框的checked尚未更改，因此必须切换逻辑(尽管看起来很奇怪(或将处理程序附加到复选框input的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表示复选框、单选框…(或聚焦元素(表示文本框字段(。因此，在单击时，它首先处理/调用您的处理程序。因此出现了问题。

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

相关文章：