jQuery最佳實踐複選框顯示/隱藏表格行並保持頁面刷新狀態

在jQuery中編寫類似這樣的東西的最佳做法是什麼？下面的腳本工作正常，但有些事告訴我有更好的。我有一個複選框基地，觸發一個切換功能，當檢查時隱藏表中的幾行，反之亦然，當選中時。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(); 
});

這是可以接受的或者是有他的行動更好的（正確）的方式。感謝我提前看到您的見解。

來源

2013-07-25 user752746

你其實有你正在試圖解決一個問題，或者是你問你的代碼是否正確......如果這真的是你問的，那是非常有見地的。 –

你可以單獨使用CSS來做到這一點。 –

爲什麼不乾脆：

$("#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()。

來源

2013-07-25 18:42:46

嗨大衛，我剛剛測試JS小提琴，它的工作，看起來更乾淨。謝謝！ – user752746

你可以用。就是嘗試（「：勾選」）：

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

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

}else{ 

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

來源

2013-07-25 18:37:07 aldanux

感謝您的回覆，這確實比我的要乾淨得多。 – user752746

這將是一個最佳實踐：

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

這裏是一個工作的jsfiddle：

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

來源

2013-07-25 18:51:50 zigo

感謝您的迴應，但是當我在提供的鏈接中加載框架並且複選框保持選中狀態但行也在那裏。行應該保持隱藏在頁面刷新上。 – user752746

jQuery最佳實踐複選框顯示/隱藏表格行並保持頁面刷新狀態

回答

相關問題