jquery - jQuery 最佳实践复选框显示/隐藏表格行并在页面刷新时保持状态

Question

在 jQuery 中编写这样的内容的最佳实践是什么？下面的脚本工作正常，但有些事情告诉我有更好的。我有一个复选框基础，它触发一个切换功能，该功能在选中时隐藏表格中的几行，反之亦然。

$("#checkboxID").change(function(){     
   $("#tableID tr.rowClass").toggle(); 
});

每当检查复选框并刷新页面时，将显示该行的显示，该行应保持隐藏。我通过添加这个脚本解决了这个问题。

if($("#checkboxID").attr("checked")){
    $("#tableID tr.rowClass").hide();
}else{
    $("#tableID tr.rowClass").show();
}
$("#checkboxID").change(function(){     
   $("#tableID tr.rowClass").toggle(); 
});

这是可以接受的还是有更好（正确）的方法。谢谢你的洞察力。

Answer 1

为什么不简单：

$("#checkboxID").change(function(){
    var self = this;
    $("#tableID tr.rowClass").toggle(!self.checked); 
}).change();

JS 小提琴演示。

使用给定的 HTML：

<label for="checkboxID">tick/untick</label>
<input type="checkbox" id="checkboxID" />
<table id="tableID">
    <tbody>
        <tr class="rowClass">
            <td>First child cell of '.rowClass'</td>
            <td>Second child cell of '.rowClass'</td>
        </tr>
        <tr>
            <td>No class for this row</td>
            <td>(Still no class)</td>
        </tr>
    </tbody>
</table>

使用 CSS，在兼容的浏览器中，您还可以使用：

input[type=checkbox]:checked ~ #tableID tr.rowClass {
    display: none;
}

JS 小提琴演示。

参考：

• change().
• toggle().

Answer 2

这将是一个最佳实践：

$("#checkboxID").change(function(){
    $("#tableID tr.rowClass").toggle(!this.checked); 
});

这是一个工作的jsfiddle：

http://jsfiddle.net/zsal/vkvSZ/1/

Answer 3

您可以尝试使用 .is(":checked")：

if($("#checkboxID").is(":checked")){

   $("#tableID tr.rowClass").hide();

}else{

    $("#tableID tr.rowClass").show();
}