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

Столкнувшись с проблемой, ни один из приведенных выше ответов не работает. Причина была в плагине 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 2

Вот базовый плагин 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 3

Я теперь неравнодушен к этому стилю.

Я назвал вашу форму и добавил 'onClick' в поле select_all.

Я также исключил флажок «select_all» из селектора 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 4

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

Answer 5

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