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マークアップの構造に従って、ハンドラー内にコードを配置してみてください。1 つの入力要素を選択したいだけのように思えます。次のことを試してください。

$(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 に答える