Установите все флажки с помощью 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'));
});

Когда установлен флажок #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

Верхний ответ не будет работать в Jquery 1.9+ из-за метода attr (). Вместо этого используйте 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

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 6

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

Answer 7

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

Этот код отлично работает у меня

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

вам нужно только добавить класс checkbox_class ко всем флажкам

Легко и просто: D

Answer 9

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

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

});  

Answer 10

Один флажок, чтобы управлять ими всеми

Для людей, которые все еще ищут плагин для управления флажками с помощью легковесного модуля, имеющего встроенную поддержку UniformJS и iCheck, и отключается, когда по крайней мере один из контролируемых флажков снят (и проверяется, когда все контролируемые флажки проверены, конечно) Я создал плагин jQuery checkAll .

Не стесняйтесь проверять примеры на странице документации .

---

Для этого примера вопроса все, что вам нужно сделать, это:

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

Разве это не ясно и просто?