如何使用jQuery選擇所有復選框？

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')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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復選框被點擊時，復選框的狀態被選中並且當前表單中的所有復選框被設置為相同的狀態。

請注意，您不需要從選擇中排除#select_all復選框，因為它與所有其他復選框具有相同的狀態。 如果出於某種原因確實需要排除#select_all ，則可以使用以下命令：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 2

簡單干凈：

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

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 );

或者你可以使用

:復選框選擇器

$("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 插件中（與主題 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 插件。

隨意檢查文檔頁面上的示例。

---

對於這個問題示例，您需要做的就是：

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

這不是很清楚很簡單嗎？

Answer 12

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

Answer 13

我現在偏愛這種風格。

我已經為您的表單命名，並在您的 select_all 框中添加了一個“onClick”。

我還從 jquery 選擇器中排除了“select_all”復選框，以防止有人點擊它時互聯網崩潰。

 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 14

這是我編寫的一個基本的 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();
});

Answer 15

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