Question

I have a table that lists locations and then allows a user to select 1 or more permissions for that location. I have the following code working that I can select the top row check-box and you can check all the boxes in that column. I’m looking for tips to optimize what I’m doing. You click on the “.all###” check-box and all the ones with a class of “.XXX” get checked. How can I optimize my jquery? I’m still learning and although I got it to work im sure its not the best route. Any help would be appreciated.

This is my part of my HTML code

        <table>
    <colgroup></colgroup>

    <colgroup></colgroup>

    <colgroup></colgroup>

    <colgroup span="5"></colgroup>

    <thead>
        <tr>
            <th class="locationCode">Location Code</th>

            <th class="locationName">Name</th>

            <th class="locationAddress">Address</th>

            <th class="selectOption">Admin</th>

            <th class="selectOption">Remote</th>

            <th class="selectOption">Support</th>

            <th class="selectOption">Misc</th>

            <th class="selectOption">Logging</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <th colspan="3" class="grayBackground"></th>

            <td class="center"><input type="checkbox" class="allAdmin admin"></td>

            <td class="center"><input type="checkbox" class="allRemote remote"></td>

            <td class="center"><input type="checkbox" class="allSupport support"></td>

            <td class="center"><input type="checkbox" class="allMisc misc"></td>

            <td class="center"><input type="checkbox" class="allLogging logging"></td>
        </tr>

        <tr>
            <td>VST</td>

            <td>Demo #1</td>

            <td>1 Street, City State</td>

            <td class="center"><input type="checkbox" class="admin"></td>

            <td class="center"><input type="checkbox" class="remote"></td>

            <td class="center"><input type="checkbox" class="support"></td>

            <td class="center"><input type="checkbox" class="misc"></td>

            <td class="center"><input type="checkbox" class="logging"></td>
        </tr>

and my jQuery

                $(function() {
                $(".allAdmin").change(function() {
                    if ($(this).prop("checked")) {
                        $(".admin").prop("checked", true);
                        return;
                    }
                    $(".admin").prop("checked", false);
                });
                $(".allRemote").change(function() {
                    if ($(this).prop("checked")) {
                        $(".remote").prop("checked", true);
                        return;
                    }
                    $(".remote").prop("checked", false);
                });
                $(".allSupport").change(function() {
                    if ($(this).prop("checked")) {
                        $(".support").prop("checked", true);
                        return;
                    }
                    $(".support").prop("checked", false);
                });
                $(".allMisc").change(function() {
                    if ($(this).prop("checked")) {
                        $(".misc").prop("checked", true);
                        return;
                    }
                    $(".misc").prop("checked", false);
                });
                $(".allLogging").change(function() {
                    if ($(this).prop("checked")) {
                        $(".logging").prop("checked", true);
                        return;
                    }
                    $(".logging").prop("checked", false);
                });
            });

Answer 1

This might be a bit of an overkill optimization, but this code should work:

$(function() {
  $('.allAdmin, .allRemote, .allSupport, .allMisc, .allLogging').change(function() {
    $('.' + $(this).attr('class').split(' ')[0].substring(3).toLowerCase()).prop('checked', $(this).prop('checked'));
  });
});

If your elements have only one class (nothing like <div class="allAdmin anotherClass">), you can use this slightly shorter version:

$(function() {
  $('.allAdmin, .allRemote, .allSupport, .allMisc, .allLogging').change(function() {
    $('.' + $(this).attr('class').substring(3).toLowerCase()).prop('checked', $(this).prop('checked'));
  });
});