2

サイトに次の jQuery 関数があります。

$('#CAT_Custom_381715_0').click(function () {
   $(".grow").fadeIn("slow");
});

私が目指しているのは、チェックボックスをクリックすると、フォームの他の部分が表示されることです。

HTML コードは以下のとおりです。

<tr>
  <td><label>Have You Grown This Plant?</label><br />
      <input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>

<tr class="grow"> <!-- FORM CODE --> </tr>
<tr class="grow"> <!-- FORM CODE --> </tr>

のCSS.grow

.grow{
  display:none;
}

問題の原因となっているテーブルと関係があると思います。エラーはスローされません。私はもともとコードをラップする div を持っていましたが、Firefox は div を削除します。それが Firefox なのか、私の CMS なのかはわかりません。

問題は、チェックボックスをクリックし<tr>てもクラスがgrow表示されないことです。

jQuery を正しく動作させるにはどうすればよいですか。

4

1 に答える 1

3

クリック動作をオンに切り替えましたが、トグルしています。ただし、この投稿を読んで、チェックボックスがクリックされただけでなく、実際にチェックされているかどうかを確認することもお勧めします.

jQueryでチェックボックスを「チェック済み」に設定しますか?

Codepen のリンクは次のとおりです: http://cdpn.io/jztKb

HTML

<table>
  <tr>
    <td><label>Have You Grown This Plant?</label><br />
        <input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
  </tr>

  <tr class="grow"><td>Hi</td></tr>
  <tr class="grow"><td>Hi</td></tr>
</table>

CSS

.grow {
  display: none;
}

jQuery

$('#CAT_Custom_381715_0').on('click', function() {
   $(".grow").fadeToggle("slow");
});
于 2013-08-18T01:10:17.127 に答える