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 Fiddle demo

使用给定的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 Fiddle demo

参考文献：

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

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

3 个答案: