Функция jQuery Click не работает?

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

Я переключил поведение щелчка в положение «включено», и оно переключается. Тем не менее, я также рекомендую вам прочитать это сообщение и не забудьте проверить, действительно ли ваш флажок действительно проверен, а не просто нажал.

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