Question

我有一个带有“全选”按钮和一堆复选框的表单。我希望在用户点击“全选”按钮时选中所有复选框。

在jquery中有优雅的方法吗？

编辑＃2：我已将问题分解为此代码; style =“display：none;”。如果我删除此代码它工作正常。任何想法？

编辑：下面的答案在我的测试表单中起作用，但是在这种情况下，按钮位于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>

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

Answer 1

$(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。

Answer 2

单击按钮调用此按钮将选中页面上的所有复选框：

jQuery("input:checkbox").attr('checked','checked');

您可以更改选择器（“input：checkbox”）以提供更好的上下文（并可能加快其执行速度）

Answer 3

因此，如果您的全选按钮的ID为select-all，您说：

$('#select-all').click(function(){
   $('input:checkbox').attr('checked', 'checked');   
);

Answer 4

只需给所有复选框一个类，并将此jQuery附加到按钮：

$(document).ready( function () {
  $('#myButton').click( function() {
    $('.checkbox').attr('checked','checked');
  });
}

假设您的按钮的id =“myButton”，并且您的复选框的class =“复选框”。

Answer 5

在我想要相同功能的情况下，它通常是一个带有复选框的行表。在这种情况下，您可以包含此代码段，然后只要标题单元格中有复选框，其下方列中的所有关联复选框都将根据其值打开/关闭。

假设这样的HTML：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="row[0]" /></td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

这是jQuery：

$('th input:checkbox').click(function() {
    var $this = $(this),
        colNum = $this.closest('th').prevAll('th').length,
        checked = $this.attr('checked')
    ;
    $this
        .closest('table')
        .find('tbody > tr')
        .each(function() {
            $(this)
                .children("td")
                .eq(colNum)
                .find("input:checkbox")
                .attr('checked', checked)
            ;
        })
    ;
});

它不需要任何额外的id或类或任何东西，并且可以用于多列复选框，这很好。这是一个演示页面：http://jsbin.com/eqeno

当用户单击按钮时，如何选择所有复选框

5 个答案: