Отмечаем все неотмеченные чекбоксы при клике на главный (правильное решение)

by paffffff

HTML

<form id="form-id" method="GET" style="float: left;">
    <table style="width: 200px; margin: 20px;">
        <thead>
            <tr>
                <td>
                    <p>
                        <input type="checkbox" class="main-checkbox" data-checkboxes=".connected-checkboxes">Далеко-далеко за.</p>
                    <hr>
                </td>
            </tr>
        </thead>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="01" data-hidden-name="foo-01">Далеко-далеко за.</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="02" data-hidden-name="foo-02">Она, заголовок.</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="03" data-hidden-name="foo-03">Заголовок, текстами.</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="04" data-hidden-name="foo-04">Необходимыми, переулка!</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="05" data-hidden-name="foo-05">Наш, сих?</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="connected-checkboxes" data-hidden-value="06" data-hidden-name="foo-06">Диких, продолжил.</td>
        </tr>
    </table>
    <table style="width: 200px; margin: 20px;">
        <thead>
            <tr>
                <td>
                    <p>
                        <input type="checkbox" class="main-checkbox" data-checkboxes=".ololo">Далеко-далеко за.</p>
                    <hr>
                </td>
            </tr>
        </thead>
        <tr>
            <td>
                <input type="checkbox" class="ololo" data-hidden-value="07" data-hidden-name="foo-07">Далеко-далеко за.</td>
       ...

JavaScript

/**
 * Отметить все чекбоксы при клике на главный.
 * С проверкой изначального состояния чекбоксов (для предотвращения дублирования функций, завязанных на изменение отдельного чекбокса)
 * К примеру если все отмечены и потом снята отметка с части чекбоксов
 * MarkUp:
 * <input type="checkbox" class="main-checkbox" data-checkboxes=".connected-checkbox" title="Отметить всё">
 * <input type="checkbox" class="connected-checkbox">
 * <input type="checkbox" class="connected-checkbox">
 */
$('.main-checkbox').on('change', function () {
    var itemData = $(this).data('checkboxes'),
        item = $(itemData + ':enabled');
    if ($(this).prop('checked')) {
        item.prop('checked', true).trigger('change');
    } else {
        item.prop('checked', false).trigger('change');
    }
    $('textarea').prepend('---------------\n');
});

// Вспомогательные функции для отображения результатов

$(document).on('change', '.connected-checkboxes, .ololo', function () {
    var a = $(this).attr('class');
    var b = $(this).data();

    if ($(this).prop('checked')) {
        changeProcessor(a, b);
    };

});

function alertOne(foo) {
    console.log('one: ' + foo.hiddenName);
    $('textarea').prepend('one: ' + foo.hiddenName + '\n');
}

function alertTwo(foo) {
    console.log('two: ' + foo.hiddenName);
    $('textarea').prepend('two: ' + foo.hiddenName + '\n');
}

function changeProcessor(foo, bar) {
    if (foo == 'connected-checkboxes') {
        alertOne(bar)
    } else {
        alertTwo(bar)
    }
    // console.log(bar);
}