2
\$\begingroup\$

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(); }
}
\$\endgroup\$
0

1 Answer 1

3
\$\begingroup\$

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 );
}
\$\endgroup\$
4
  • \$\begingroup\$ +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 ? \$\endgroup\$ Commented Aug 21, 2014 at 11:38
  • \$\begingroup\$ how come you have "," after elm.checked \$\endgroup\$ Commented Aug 21, 2014 at 11:44
  • 2
    \$\begingroup\$ You can shorten it a bit more by using $target.toggle(ischecked) \$\endgroup\$
    – lebolo
    Commented Aug 21, 2014 at 20:44
  • \$\begingroup\$ @CustomizedName If the IDs can't be changed, you can use string.replace function on the passed ID: 'cbIncludeOpen'.replace( 'cbInclude', '' ) and use it. \$\endgroup\$
    – hjpotter92
    Commented Aug 22, 2014 at 1:55

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.