我有水平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
表示复选框、单选框…(或聚焦元素(表示文本框字段(。因此,在单击时,它首先处理/调用您的处理程序。因此出现了问题。
请注意,这个答案只是解决了问题,而不是试图改进您的代码。