jquery - 显示或隐藏网络网格的全选复选框上的按钮

Question

如何修改我的代码以在 selectall 上显示按钮并在取消选择 selectall 时隐藏按钮。它在 Firefox 上工作正常，但在 Chrome 上有问题。

 $('#selectall').click(function () {
                                    $('.selectedId').prop('checked', isChecked('selectall'));
                                });

$('input[type="checkbox"]').change(function () {

        if ($('.selectedId:checked').length >= 1) {
            if ($('#AdvancedOption').is(':hidden'))
                $('#AdvancedOption').fadeIn('fast');
            if ($('.selectedId:checked').length == 1) {
                $('.toolbar1').fadeIn('fast');
            }
            else
                $('.toolbar1').fadeOut('fast');
            $('.toolbar2').fadeIn('fast');
        }

        else {
            $('.toolbar1').fadeOut('fast');
            $('#AdvancedOption').fadeOut('fast');
        }

    });

这里是相关的Html

<div id="AdvancedOption" style="display: none" class="col-md-8 col-sm-8 btn-group-sm">
                <a href="#" class="btn btn-danger toolbar2 deleteAccount" title="Delete this account" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                <a href="#" class="btn btn-warning toolbar1 editTeam" title="Edit this account" role="button" style="display:none;"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
            </div>

Answer 1

考虑以下示例:

HTML

<ul class="chk-container">
    <li>
        <input type="checkbox" id="selectAll" />Select All
    </li>
    <li>
        <input type="checkbox" name="check" value="check1" class="selectedId" />Checkbox 1
    </li>
    <li>
        <input type="checkbox" name="check" value="check2" class="selectedId" />Checkbox 2
    </li>
    <li>
        <input type="checkbox" name="check" value="check3" class="selectedId" />Checkbox 3
    </li>
    <li>
        <input type="checkbox" name="check" value="check4" class="selectedId" />Checkbox 4
    </li>
    <li>
        <input type="checkbox" name="check" value="check5" class="selectedId" />Checkbox 5
    </li>
</ul>
<div id="AdvancedOption" style="display: none;" class="col-md-8 col-sm-8 btn-group-sm">
    <a href="#" class="btn btn-danger toolbar2 deleteAccount" title="Delete this account" role="button">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </a>
    <a href="#" class="btn btn-warning toolbar1 editTeam" title="Edit this account" role="button" style="display: none;">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </a>
</div>

CSS

ul {
    padding-left: 5px;
}

ul.chk-container li {
    border-bottom: 1px solid #E7E7E7;
    padding: 2px;
    list-style-type: none;
}

jQuery

$('input[type="checkbox"]').click(function() {
    /* Check all checkboxes if 'Select All' is clicked */
    if (this.id == 'selectAll') {
        var isChecked = this.checked;
        $('.selectedId').each(function() {
            this.checked = isChecked;
        });
    }

    /* Check / Uncheck 'Select All' checkbox if all the checkboxes are checked / unchecked */
    if ($('.selectedId:checked').length == $('.selectedId').length) $('#selectAll').prop('checked', true);
    else $('#selectAll').prop('checked', false);

    /* Toggle controls on the basis of selected checkboxes */
    if ($('.selectedId:checked').length >= 1) {
        $('#AdvancedOption').fadeIn('fast');

        if ($('.selectedId:checked').length == 1) {
            $('.toolbar1').fadeIn('fast');
        } else {
            $('.toolbar1').fadeOut('fast');
            $('.toolbar2').fadeIn('fast');
        }
    } else {
        $('.toolbar1').fadeOut('fast');
        $('#AdvancedOption').fadeOut('fast');
    }
});

已更新DEMO