优化 jQuery 代码

Question

我有一个列出位置的表格，然后允许用户为该位置选择一个或多个权限。我有以下代码工作，我可以选择顶行复选框，您可以选中该列中的所有框。我正在寻找优化我正在做的事情的技巧。您单击“.all###”复选框，所有具有“.XXX”类的复选框都会被选中。如何优化我的 jquery？我仍在学习，虽然我得到了它的工作，但我确定它不是最好的路线。任何帮助，将不胜感激。

这是我的 HTML 代码的一部分

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

还有我的 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

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

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

---

您似乎正在尝试使用单个复选框来控制一组复选框（警告，前方无耻的自我推销）。如果是这种情况，我写的一个 jQuery 插件会让你更容易：http://mjball.github.com/jQuery-CheckAll。

Answer 2

这可能有点矫枉过正，但这段代码应该可以工作：

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

如果你的元素只有一个类（不像<div class="allAdmin anotherClass">），你可以使用这个稍微短一点的版本：

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

Answer 3

我看到的一个优化是将所有 jQuery 调用转换为变量。即：

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

这与此处描述的“$(this)”和“this”之间的区别相同：Does using $this instead of $(this) provide a performance enhancement?

在代码方面，你也可以使用三元：

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