jQuery best practice checkbox show/hide table rows and keep state on page refresh -
what best practice writing in jquery? script below works fine, tells me there’s better. have checkbox base triggers toggle function hides couple rows in table when checked , vice-versa when unchecked.
$("#checkboxid").change(function(){ $("#tableid tr.rowclass").toggle(); });
whenever checkbox checked , page refreshes row display should stay hidden. solved issue add script.
if($("#checkboxid").attr("checked")){ $("#tableid tr.rowclass").hide(); }else{ $("#tableid tr.rowclass").show(); } $("#checkboxid").change(function(){ $("#tableid tr.rowclass").toggle(); });
is acceptable or there better(proper) way of going this. advance insight.
why not simply:
$("#checkboxid").change(function(){ var self = this; $("#tableid tr.rowclass").toggle(!self.checked); }).change();
with given 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 row</td> <td>(still no class)</td> </tr> </tbody> </table>
with css, in compliant browsers, use:
input[type=checkbox]:checked ~ #tableid tr.rowclass { display: none; }
references:
Comments
Post a Comment