Я хочу использовать кнопку переключения рядом со столом, чтобы скрыть или показать строки таблицы на основе того, установлен ли флажок в последнем столбце таблицы.
Вот код таблицы:
<table>
<tr>
<td>1<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox" checked="checked"><td>
</tr>
<tr>
<td>2<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox"><td>
</tr>
</table>
На боковой панели у меня есть эта кнопка:
<a id="comtoggle" class="btn" href="#">Toggle</a>
В приведенном выше примере я хотел бы, чтобы строка 1 исчезла, если нажата кнопка Toggle, но повторите ее, если снова нажать кнопку переключения. Состояние флажка хранится в базе данных и сохраняется через функцию AJAX (что отлично работает).
Вот jQuery, который у меня есть. Я думаю, что моя проблема заключается в использовании .is(': checked') в третьей строке.
$("#comtoggle").click(function() {
if ($('.form-checkbox').is(':checked')) {
$('.form-checkbox').is(':checked').closest('tr').toggle();
}
});
С помощью этого фрагмента все мои строки исчезают, а консоль Firebug показывает эту ошибку:
TypeError: $target.offset(...) is null
Не уверен, что это связано.
Полагаю, это то, что вы имеете в виду. Поймайте скрипку: http://jsfiddle.net/7C423/1 Все, что вам нужно сделать, это просто захватить то, что вас интересует, и сыграть в мяч.
$("#comtoggle").click(function() {
$(".form-checkbox:checked").closest("tr").toggle();
});
Поскольку вы выбираете элементы по классам, вам нужно зацикливать их, и в случае их проверки скройте строку.
$("#comtoggle").click(function() { $('.form-checkbox').each(function(chk){ if($(this).is(':checked')) $(this).closest("tr").toggle(); }); });