Question

我需要jQuery选择器的帮助。假设我有一个标记，如下所示：

<form>
    <table>
        <tr>
            <td><input type="checkbox" id="select_all"/></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select[]"/></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select[]"/></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select[]"/></td>
        </tr>
    </table>
</form>

当用户点击它时，如何获取除#select_all以外的所有复选框？任何帮助将不胜感激。

Answer 1

一个更完整的示例，应该适用于您的情况：

$('#select_all').change(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    checkboxes.prop('checked', $(this).is(':checked'));
});

单击#select_all复选框后，将选中复选框的状态，并将当前表单中的所有复选框设置为相同的状态。

请注意，您无需从选区中排除#select_all复选框，因为它与其他选项具有相同的状态。如果由于某种原因确实需要排除#select_all，您可以使用：

var checkboxes = $(this).closest('form').find(':checkbox').not($(this));

Answer 2

简单干净

$('#select_all').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});

Answer 3

由于attr（）方法，最终答案在Jquery 1.9+中不起作用。改为使用prop（）：

$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});

Answer 4

$("form input[type='checkbox']").attr( "checked" , true );

或者您可以使用

<强> :checkbox Selector

$("form input:checkbox").attr( "checked" , true );

我重写了您的HTML并为主复选框提供了一个点击处理程序

$(function(){
    $("#select_all").click( function() {
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>

Answer 5

 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });

Answer 6

 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });

Answer 7

jQuery(document).ready(function () {
        jQuery('.select-all').on('change', function () {
            if (jQuery(this).is(':checked')) {
                jQuery('input.class-name').each(function () {
                    this.checked = true;
                });
            } else {
                jQuery('input.class-name').each(function () {
                    this.checked = false;
                });
            }
        });
    });

Answer 8

$("#select_all").change(function () {

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

});

Answer 9

此代码可以正常使用

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

您只需要将类 checkbox_class 添加到所有复选框

简单易行：D

Answer 10

面对问题，上述答案都不起作用。原因在于jQuery Uniform插件（使用theme metronic）。我希望答案有用：）

使用 jQuery Uniform

$('#select-all').change(function() {
    var $this = $(this);
    var $checkboxes = $this.closest('form')
        .find(':checkbox');

    $checkboxes.prop('checked', $this.is(':checked'))
        .not($this)
        .change();
});

Answer 11

一个用于统治所有
的复选框

对于那些仍在寻找插件来控制复选框的人来说，通过轻量级的复选框，对UniformJS和iCheck提供开箱即用的支持，并且当至少有一个受控复选框未选中时会取消选中（并在所有受控复选框时进行检查）当然是检查了）我创建了一个jQuery checkAll plugin。

随意查看documentation page上的示例。

对于这个问题的例子，你需要做的就是：

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

不是那么简单吗？

Answer 12

$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

Answer 13

  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });

Answer 14

我现在偏爱这种风格。

我已经为您的表单命名，并添加了一个＆on;＆＃39; onClick＆＃39;到你的select_all框。

我也排除了＆＃39; select_all＆＃39;来自jquery选择器的复选框，以防止有人点击它时互联网爆炸。

 function toggleSelect(formname) {
   // select the form with the name 'formname', 
   // then all the checkboxes named 'select[]'
   // then 'click' them
   $('form[name='+formname+'] :checkbox[name="select[]"]').click()
 }

 <form name="myform">
   <tr>
        <td><input type="checkbox" id="select_all"    
                   onClick="toggleSelect('myform')" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
</table>

Answer 15

这是我编写的基本jQuery插件，它选择页面上的所有复选框，但用作切换的复选框/元素除外：

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

然后只需在复选框或按钮元素上调用该函数：

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

使用jQuery选中所有复选框

15 个答案: