Проверка всех флажков в jQuery

Question

У меня есть таблица установки, подобная этой:

<table>
    <thead>
        <th>
            <input type="checkbox" class="check-all" />
        </th>
        <th>
            Title
        </th>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 2</td>
        </tr>
    </tbody>
</table>

Я пытаюсь получить ее, поэтому когда флажок в заголовке с классом 'check-all' установлен, он проверяет все флажки ниже,

Это то, что у меня есть, но, похоже, оно не работает

        $('.check-all').click(
        function(){
            $(this).parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
        }
    )

Есть идеи?Спасибо!

Answer 1

Сначала вы должны использовать jQuery.closest () , чтобы найти ближайший тег таблицы.

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").attr('checked', this.checked);   
 });

Во-вторых. Если вы используете jQuery 1.6 или выше, вы должны использовать jQuery.prop ()

 $('.check-all').click(function() {
   $(this).closest('table').find("input:checkbox").prop('checked', this.checked);   
 });

Наконец, для логического значения из поля флажка вам не нужен объект jQuery, вы можете просто использовать HTML DOM this.checked

Answer 2

Я написал статью об этом некоторое время назад.Будет проще, если вы установите все соответствующие флажки в одном классе.

ОБНОВЛЕНИЕ

Вот jsFiddle с кодом, скопированным здесь и сейчас, чтоУ меня больше времени.

HTML

<table>
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="check-all" />
            </th>
            <th>Check All Below</th>
        </tr>
        <tr><th><hr /></th></tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="groupOne" /></td>
            <td>Name</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="groupOne" /></td>
            <td>Name 2</td>
        </tr>
    </tbody>
</table>

JavaScript

var $_checkAll = $('.check-all');
var $_groupOne = $('.groupOne');

$_checkAll.click(function(){
    $_groupOne.prop('checked', $_checkAll.prop('checked'));
});

/* If I uncheck a groupOne checkbox, uncheck the related "check all" */
$_groupOne.click(function(){
    if ( !$(this).prop('checked') ) {
        $_checkAll.prop('checked', false );
    }
});

/* Checking the "check all" checkbox when all groupOne checkboxes 
have been checked is left as homework. */

Answer 3

Я потерял след родителей.:) Попробуйте это:

$(this).closest("table").find("input[type='checkbox']").attr('checked', $(this).is(':checked'));

Редактировать:

PS @ Джон Хартсок немного изменил ваш синтаксис.Я оставил ваш синтаксис как есть, но его синтаксис лучше (или вы можете просто использовать .find (": checkbox"). Я предполагаю, что jquery может найти флажки гораздо более эффективным способом, чем получение всех входных данных изатем проверьте атрибут «тип», чтобы увидеть, если это флажок.