JQuery "выбрать все"

Ответ 1

Ваша скрипка работает после того, как я сделал 3 исправления:

• импорт jQuery (верхнее левое меню)
• добавление отсутствующей функции isChecked
• использовать prop вместо attr, чтобы установить флажки

Ответ 2

Почему бы вам не сделать так? Это более понятный и читаемый

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

DEMO

Ответ 3

Это связано с тем, что метод selectAll недоступен в глобальной области.

Во втором раскрывающемся списке на левой панели Frameworks and Extensions выберите no -wrap head/body, он будет работать нормально.

Причиной является по умолчанию onload, и когда выбрана onload, все введенные script обернуты внутри анонимной функции, как указано ниже. Это сделает функцию selectAll локальным методом внутри анонимной функции, поэтому обработчик события onclick, который использует глобальную область видимости, не получит доступ к методу, вызывающему ошибку Uncaught ReferenceError: selectAll is not defined.

$(window).load(function(){
    //Entered script
});

Демо: Fiddle

Обновление Но вы можете упростить его как

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

и удалить все обработчики onclick из входных элементов, как показано в этой демонстрации

Ответ 4

Используйте это...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

Смотрите DEMO

Ответ 5

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized

Ответ 6

Это должно сделать трюк для вас.

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

Ответ 7

Предположим, что у родительского флажка есть класс mainselect, и у всех дочерних есть класс childselect

Затем выбор родителя будет выбирать все флажки и наоборот с помощью кода ниже:

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});

Ответ 8

$ (Функция() {

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

Ответ 9

Небольшое усовершенствование решения @letiagoalves, если ваши флажки имеют определенную обработку, связанную с событием click. Не попросил OP, но что-то, что я должен был сделать в прошлом. В основном вместо прямой установки проверяемого свойства каждого зависимого флажка он сравнивает проверенное состояние каждого зависимого флажка с флажком selectall и запускает событие click для тех, которые находятся в противоположном состоянии.

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

DEMO: https://jsfiddle.net/jajntuqb/2/

Ответ 10

Вы можете просто добавить функцию дескриптора в событие click на флажке select all:

$('#chk-all-items').click(selectAll);

И тогда этой функции должно быть достаточно, чтобы выбрать все или отменить выбор всех.

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }

Ответ 11

Более конкретное решение:

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>