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

js fiddle demo.

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

js fiddle demo.

references:


Comments

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -