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>

.grow

的CSS

.grow{
  display:none;
}

我认为与导致问题的表格有关。没有错误被抛出。我最初有一个div包装代码但Firefox将删除div。不确定这是Firefox还是我的CMS。

问题是<tr>类grow在点击复选框时未显示。

如何让jQuery正常工作。

Answer 1

我将点击行为切换为开启并且正在切换。不过，我还建议您阅读这篇文章，并确保检查您的复选框是否实际检查，而不是仅仅点击。

Setting "checked" for a checkbox with 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");
});

jQuery单击功能不起作用？

1 个答案: