基於按鈕單擊來顯示/隱藏表格行

Question

我想要使用表格旁邊的切換按鈕來根據表格最後一列中的複選框是否被選中來隱藏或顯示錶格行。

以下是表中的代碼：

<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行，如果切換到消失按鈕被單擊，但如果再次單擊切換按鈕，它會再次出現。複選框的狀態存儲在數據庫中，並通過AJAX功能保存（工作正常）。

這裏是我有的jQuery。我認爲我的問題是在第三行使用.is（'：checked'）。

$("#comtoggle").click(function() { 
    if ($('.form-checkbox').is(':checked')) { 
    $('.form-checkbox').is(':checked').closest('tr').toggle(); 
    } 
}); 

在這個片段中，我的所有行的消失，和螢火蟲的控制檯顯示此錯誤：如果

TypeError: $target.offset(...) is null

不知道這是有關。

Answer 1

我想這就是你的意思。趕上小提琴也是：http://jsfiddle.net/7C423/1 所有你需要做的只是抓住你感興趣的東西，併發揮球。

$("#comtoggle").click(function() { 
     $(".form-checkbox:checked").closest("tr").toggle(); 
}); 

Answer 2

由於您是按類選擇元素，因此您需要循環調整它們，以防止它們被選中時隱藏一行。

$("#comtoggle").click(function() { $('.form-checkbox').each(function(chk){ if($(this).is(':checked')) $(this).closest("tr").toggle(); }); });