javascript - jQuery 单击功能不起作用？

Question

我在网站上有以下 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 正常工作。

Answer 1

我将点击行为切换为打开，它正在切换。但是，我也建议您阅读这篇文章，并确保检查您的复选框是否真的被选中，而不仅仅是点击。

使用 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");
});