получить все входные данные в содержащей таблице с помощью jquery

Question

Я пытаюсь установить флажок «выбрать все» в jQuery. вот текущая разметка:

<table>
  <thead>
     <tr>
       <th><input class='select-all' type='checkbox' /></th>
        //etc..
     </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class='list-select' type='checkbox' /><td>
     //etc..
    </tr>
    //more <tr>s..
  </tbody>
</table>

Какой самый простой способ получить все флажки «список-выбор» из события click флажка «Выбрать все»?

$(".select-all").click(function() {

});

На странице может быть более одного из них, поэтому оно должно быть относительным. то есть я не могу просто использовать $(".list-select")

Answer 1

Вот пример быстрой скрипки: http://jsfiddle.net/ru3Nv/

В основе лежит:

$('.select-all').click(function(){
    $(this).parents('table').find('.list-select').prop("checked", $(this).prop("checked"));
});

Обратите внимание, что я бы также рекомендовал добавить прослушиватели в поля .list_select, чтобы в случае, если какой-либо из них станет непроверенным, элемент select all станет непроверенным, а если все они будут проверены по отдельности, тогда будет также выбран вариант select all.

Answer 2

Если флажок «Выбрать все» всегда находится в <thead> таблицы, то вы можете использовать:

$(this).parents('table').find('.list-select').prop('checked', true);

Answer 3

Попробуйте приведенный ниже код.Это логика для проверки флажков и все флажки.Используйте шаблон для класса для одиночного checkbox => "chkSelect-'AnySignificantName '" и для всех checkbox => "chkSelect-'AnySignificantName'-all", чтобы использовать эту логику.

Например, используйте classs«cheSelect-Grid-All» для флажка «cbSelectAll1» заголовка и «cheSelect-Grid» для строк тела таблицы.

$("body").on("click", "input[type='checkbox'][class*='chkSelect-']", function () {
var classes = $(this).attr('class').split(' ');
var selfClassname = '', type = 'single', singleClassName = '', allClassName = '';
if (classes.length > 0) {
    classes.forEach(function (a) {
        if (a.indexOf('chkSelect-') > -1) {
            selfClassname = a;
            return;
        }
    });
}
if (selfClassname !== '') {
    if ((selfClassname.match(/-/g) || []).length === 2) {
        type = 'all';
        allClassName = selfClassname;
        singleClassName = allClassName.replace("-All", "");
    }
    else {
        singleClassName = selfClassname;
        allClassName = singleClassName + "-All";
    }
    if (singleClassName !== '' && allClassName !== '') {
        if (type === "all") {
            $("." + singleClassName).prop("checked", $(this).is(":checked"));
        }
        else {
            if ($(this).is(":checked") && $("." + singleClassName).length === $("." + singleClassName + ":checked").length) {
                $("." + allClassName).prop("checked", true);
            }
            else {
                $("." + allClassName).prop("checked", false);
            }
        }
    }
}
});

Answer 4

Я думаю, вы пытаетесь достичь этого:

$(".select-all").change(function(){
  if($(this).attr("checked")=="checked"){
    $(".list-select").attr("checked","checked");
  }
  else{
    $(".list-select").removeAttr("checked");
  }
});

Это дает вашему флажку .select-all функциональность для выбора и отмены выбора всех флажков .list-select.

Answer 5

(Извините, сначала неправильно прочитан вопрос.)

Вероятно, поднимитесь до ближайшего table, затем до .list-select:

var select = $(this).closest('table').find('.list-select');

(this будет .select-all, по которому щелкнули, потому что это внутри обработчика события.)

closest начинается с элемента, который вы ему даете, и перемещается вверх по иерархии, чтобы найти совпадение, и останавливается на первом найденном элементе. Тогда find является своего рода противоположностью, оттуда он находит элементы-потомки, соответствующие селектору.