Filter on HTML table using jQuery

Question

I am adding some check box filters on a HTML table, based on whether a check box is checked or not, and I am toggling rows. Is there anyway I could improve this code? There is no issue with it at the moment I could think of e.g. performance wise, but maybe someone could help me with decreasing number of lines.

HTML

<div id="RMbody" class="panel">
 <div class="someRow" style="width: 100%">
 <asp:CheckBox ID="cbIncludeOpen" runat="server" ClientIDMode="Static" Checked="true" onclick="RMToggle()" />
 <asp:CheckBox ID="cbIncludeNew" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
 <asp:CheckBox ID="cbIncludeClosed" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
 <asp:CheckBox ID="cbIncludeRejected" runat="server" ClientIDMode="Static" onclick="RMToggle()" />
 </div>
 <table id="table1" class="dmctable">
 <tr data-id="Open"></tr>
 <tr data-id="Rejected"></tr>
 <tr data-id="New"></tr>
 <tr data-id="Open"></tr>
 <tr data-id="Closed"></tr>
 <tr data-id="Open"></tr>
 <tr data-id="New"></tr>
 <tr data-id="Open"></tr>
 </table>
</div>

JS

function RMToggle() {
 var o = $("#cbIncludeOpen").is(':checked');
 var n = $("#cbIncludeNew").is(':checked');
 var c = $("#cbIncludeClosed").is(':checked');
 var r = $("#cbIncludeRejected").is(':checked');
 if (o) { $('#table1 tr[data-id="Open"]').show(); }
 else { $('#table1 tr[data-id="Open"]').hide(); }
 if (n) { $('#table1 tr[data-id="New"]').show(); }
 else { $('#table1 tr[data-id="New"]').hide(); }
 if (c) { $('#table1 tr[data-id="Closed"]').show(); }
 else { $('#table1 tr[data-id="Closed"]').hide(); }
 if (r) { $('#table1 tr[data-id="Rejected"]').show(); }
 else { $('#table1 tr[data-id="Rejected"]').hide(); }
}

Answer 1

Since you are executing the RMToggle function whenever a checkbox is selected, extend it a little by passing in the IDs too. (I've changed the IDs as well):

<div class="someRow" style="width: 100%">
 <asp:CheckBox ID="Open" runat="server" ClientIDMode="Static" Checked="true" onclick="RMToggle(this)" />
 <asp:CheckBox ID="New" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
 <asp:CheckBox ID="Closed" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
 <asp:CheckBox ID="Rejected" runat="server" ClientIDMode="Static" onclick="RMToggle(this)" />
</div>

Now, moving to the toggle function:

function RMToggle( elm ) { // elm = element
 var ischecked = elm.checked,
 $target = $('#table1 tr[data-id="' + elm.id + '"]');
 $target.toggle( ischecked );
}

• Mathematics: +1 thank you, i liked the way you did it, but this going to be placed on sharepoint, sharepoint might have controls with ids open, close, rejceted etc, would that not going to affect ?
• Mathematics: how come you have "," after elm.checked
• lebolo: You can shorten it a bit more by using $target.toggle(ischecked)
• hjpotter92: @CustomizedName If the IDs can't be changed, you can use string.replace function on the passed ID: 'cbIncludeOpen'.replace( 'cbInclude', '' ) and use it.