5

我有以下代码，我正在尝试开始工作。我想要的是如果选中复选框，则显示带有“生成器”类的表行，如果未选中（默认）则将其删除。我已经测试了 jquery，我知道它加载正常，所以这不是问题。

以下是我尝试从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>&nbsp;</td>
         </tr>
         <tr class='generator'>
          <td class='tdl'>Start Time</td><td class='tdr'><input type='text' name='start_time' class='textbox'/></td><td>&nbsp;<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>&nbsp;<span class='error'>*<?php echo $errors['end_time']; ?></span></td>
         </tr>

我对 jQuery 还是很陌生，并且正在学习。我用复选框检查尝试的一切都失败了。我可以使用一个按钮并且它可以工作（使用不同的代码），但我需要能够使用该复选框。我在发布之前尝试了更多的事情，说他们都处理复选框，但点击复选框时他们都没有做任何事情。

4

3 回答 3

9

您需要将该函数包装在文档就绪回调中，否则在绑定处理程序时元素不存在：

$(document).ready(function() {
    $('#gen_form input:checkbox').click(function() {
        $(".generator").toggle(); // simplifies to this
    });
});

此外，jQuery.toggle()为您交替处理隐藏/显示。

于 2012-08-15T17:28:43.303 回答
2

尝试将代码放入$(document).ready处理程序中，根据标记的结构，听起来您只想选择一个输入元素，请尝试以下操作：

$(document).ready(function(){
  $('#showGen').change(function(){
      $('.generator').css('display', this.checked ? 'block' : 'none');
      // or $('.generator').toggle()
  })
})
于 2012-08-15T17:31:44.467 回答
1

这是因为 dom 还没有准备好，你的脚本在元素存在之前运行。

如果你把你的脚本包装在 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();
    }
  });
});

我在 jsFiddle 中尝试过它并且它有效

于 2012-08-15T17:30:58.623 回答