Question

我有一个列出位置的表，然后允许用户为该位置选择1个或多个权限。我有以下代码工作，我可以选择顶行复选框，您可以检查该列中的所有框。我正在寻找优化我正在做的事情的技巧。单击“.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);
});

优化jQuery代码

3 个答案: