jquery - 用户单击按钮时如何选择所有复选框

我有一个带有“全选”按钮和一堆复选框的表格。我想让它在用户单击“全选”按钮时选中所有复选框。

有没有在jQuery的优雅的方式来做到这一点？

编辑＃2：我已将问题隔离到此代码； style =“ display：none;”。如果我删除此代码，它工作正常。有任何想法吗？

编辑：下面的答案在我的测试表单中有效，但是在这种情况下，按钮位于div内部的表单内部，该div仅显示为simpledialog.show（）的一部分。在这种情况下，由于某种原因，当我单击按钮时，我什么也没看到：

javascript：

<script type="text/javascript">
$(document).ready(function() {
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function() {
            $('#checkboxStatus').html('');
        },
        close: function() {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function() {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show();
        }
    });

});

<script type="text/javascript">
$(function() {
$('#selectAll').click(function() {
        var select_all = (this.value === 'Select All');
        $(':checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';
    });
});

身体：

<div style="display: none;" class="scrollableDiv" id="simpleDialog3">
    <h3>DEMO3</h3>
    <form id="checkboxForm">
    <input type="button" id="selectAll" value="TT" />
    <input type="checkbox" class="chckbx" value="1" /><br />
    <input type="checkbox" class="chckbx" value="1" /><br />
    </form>
    <p>
        <a href="#" class="close">Close</a></p>
</div>

知道为什么在这种情况下不起作用吗？

最佳答案

$(function(){
    $('#myButton').click(function(){
        var select_all = (this.value === 'Select All');
        $('input:checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';
    });
});

尝试在对话框实例化之前放置此代码。

似乎您可能要切换到jQuery UI Dialog。