jQuery 复选框上的jQuery单击事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11974052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click event on checkbox not working
提问by Scott Rowley
I have the following code that I'm trying to get working. What I want is to have the table rows with class "generator" show up if the checkbox is checked and removed if it is unchecked (default). I have tested jquery and I know it is loading ok so that is not the issue.
我有以下代码，我正在尝试开始工作。我想要的是如果复选框被选中并删除（如果未选中（默认）），则显示带有类“生成器”的表行。我已经测试了 jquery，我知道它加载正常，所以这不是问题。
The following is my code that I have tried to adapt from jQuery checkbox event handling:
以下是我尝试改编自jQuery 复选框事件处理的代码：
<script>
$('#gen_form input:checkbox').click(function() {
var $this = $(this);
// $this will contain a reference to the checkbox
if ($this.is(':checked')) {
$(".generator").toggle();
} else {
$(".generator").toggle();
}
});
</script>
<?php if(isset($msg)){ echo "<span id='msg'>".$msg."</span>"; }?>
<h2>Add CLLI</h2>
<form method="post" id='gen_form'>
<table class="form_table_newuser">
<tr>
<td class='tdl'>Generator</td><td class='tdr'><input type='checkbox' id='showGen' name='generator' /></td><td> </td>
</tr>
<tr class='generator'>
<td class='tdl'>Start Time</td><td class='tdr'><input type='text' name='start_time' class='textbox'/></td><td> <span class='error'>*<?php echo $errors['start_time']; ?></span></td>
</tr>
<tr class='generator'>
<td class='tdl'>End Time</td><td class='tdr'><input type='text' name='end_time' class='textbox'/></td><td> <span class='error'>*<?php echo $errors['end_time']; ?></span></td>
</tr>
I'm still pretty new to jQuery and am learning. Everything I have tried with the checkbox checking has failed. I can use a button and it worked (with different code), but I need to be able to use the checkbox. I tried a few more things before posting this that say they all deal with the checkbox but none of them have done anything at all when clicking the checkbox.
我对 jQuery 还是很陌生并且正在学习。我用复选框检查尝试过的一切都失败了。我可以使用一个按钮并且它可以工作（使用不同的代码），但我需要能够使用复选框。在发布之前，我尝试了更多的东西，说它们都处理了复选框，但在单击复选框时，它们都没有做任何事情。
回答by nbrooks
You need to wrap the function in a document ready callback, otherwise the elements don't exist at the time the handler is bound:
您需要将函数包装在文档就绪回调中，否则在绑定处理程序时元素不存在：
$(document).ready(function() {
$('#gen_form input:checkbox').click(function() {
$(".generator").toggle(); // simplifies to this
});
});
Also, jQuery .toggle()handles hiding/showing alternately for you.
此外，jQuery.toggle()为您交替处理隐藏/显示。
回答by undefined
Try putting your code inside the $(document).readyhandler, according to the structure of your markup, it sounds that you just want to select one input element, try the following:
尝试将您的代码放在$(document).ready处理程序中，根据您的标记结构，听起来您只想选择一个输入元素，请尝试以下操作：
$(document).ready(function(){
$('#showGen').change(function(){
$('.generator').css('display', this.checked ? 'block' : 'none');
// or $('.generator').toggle()
})
})
回答by James Kyburz
It is because the dom is not ready, your script runs before the elements exist.
这是因为 dom 未准备好，您的脚本在元素存在之前运行。
If you wrap your script in jQuery's document ready like so it will work :-
如果您将脚本包装在 jQuery 的文档中，就像这样它会工作：-
$(function(){
$('#gen_form input:checkbox').click(function() {
var $this = $(this);
// $this will contain a reference to the checkbox
if ($this.is(':checked')) {
$(".generator").toggle();
} else {
$(".generator").toggle();
}
});
});
I tried it in jsFiddle and it worked
我在 jsFiddle 中尝试过，它奏效了
