Optimizing jQuery code

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

Why do you have 2 classes for each "master" checkbox? class="allAdmin admin" would be more understandable as class="allAdmin". I don't think it functionally changes your JavaScript. — RustyTheBoyRobot
– RustyTheBoyRobot, Commented Aug 19, 2011 at 0:09

Matt Ball · Accepted Answer · 2012-04-02 18:47:58Z

4

var selector = ['.allAdmin', '.allRemote', /* etc */].join(', ');

$(selector).change(function ()
{
    var sel = '.' + this.className.substring(3).toLowerCase();
    $(sel).prop('checked', this.checked);
});

It looks like you're trying to use a single checkbox to control a group of checkboxes (warning, shameless self-promotion ahead). If this is the case, there's a jQuery plugin I wrote that will make this much easier for you: http://mjball.github.com/jQuery-CheckAll.

edited Apr 2, 2012 at 18:47

answered Aug 19, 2011 at 0:03

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blender · Accepted Answer · 2011-08-20 04:05:46Z

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

edited Aug 20, 2011 at 4:05

answered Aug 19, 2011 at 0:04

Blender

300k55 gold badges462 silver badges511 bronze badges

2 Comments

Eric Hastings Over a year ago

Could you explian this a little? Seems like you look for the change on all the "all" classes, then concatenate a period to get the td class. Then some type of array to ...something...something..something...dark side... Also it works and is only 2 lines, thanks for it.

Blender Over a year ago

Really? I'm amazed that it does. I never tested it. Anyways, since you asked for optimized/compact, I made it hard to read. Basically, it takes the class attribute of the item, splits it by the space (since you can have more than one class, the first one is chosen), and chops off the first four letters with .substring(3). Then, that's made lowercase and that whole thing extracts the name of the appropriate child (.allAdmin -> .admin). That element's check state (checked/unchecked) is then set to that of the object we're working with.

Community · Accepted Answer · 2017-05-23 12:19:52Z

0

One optimization I see is transforming all your jQuery calls into variables. ie:

var logging = $(".logging");
//More code
logging.prop("checked", true);
//etc...
logging.prop("checked", false);

This is the same as the difference between "$(this)" and "this" described here: Does using $this instead of $(this) provide a performance enhancement?

Code-wise, you can also use ternaries:

$(".allAdmin").change(function() {
    $(".admin").prop("checked",
    ($(".admin").prop("checked") ? true : false); // ((condition) ? do_true : do_false);
});

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Aug 19, 2011 at 0:06

red

3,2441 gold badge19 silver badges17 bronze badges

Collectives™ on Stack Overflow

Optimizing jQuery code

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related