Как выбрать значение всех входных значений tbody, используя jQuery

Question

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

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

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

http://jsfiddle.net/leongaban/7LCjH/

^В моей скрипке примера вы можете увидеть номера добавляются в мой массив (или серую DIV для визуализации).

---

Как бы вы захватили все номера идентификаторов из строк tbody из флажка «Выбрать все»?

JQuery

var contacts = []; 

// add multiple select/deselect functionality 
$("#selectall").click(function() { 
    $('.case').attr('checked', this.checked); 
    //contacts.push($('#tbody').children(tr > td > input).val();) 
}); 

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

    var $tr = $(this).closest("tr"); 
    var id = $tr.data('coworker-id'); 

    contacts.push(id); 

    $('#arrayContent').empty(); 
    $('#arrayContent').append(contacts+','); 

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

}); 

HTML

<table> 

<thead> 
    <tr> 
     <td><input type="checkbox" id="selectall"/></td> 
     <td>Select All</td> 
    </tr> 
    <tr> 
     <td colspan="2"><hr/></td> 
    </tr> 
</thead> 

<tbody id="tbody"> 
    <tr data-coworker-id="1"> 
     <td><input type="checkbox" class="case" name="case" value="1"/></td> 
     <td>1</td> 
    </tr> 
    <tr data-coworker-id="2"> 
     <td><input type="checkbox" class="case" name="case" value="2"/></td> 
     <td>2</td> 
    </tr> 
    <tr data-coworker-id="3"> 
     <td><input type="checkbox" class="case" name="case" value="3"/></td> 
     <td>3</td> 
    </tr> 
</tbody> 

Answer 1

Вы можете изменить ваш выберите все обработчик следующим образом:

$("#selectall").click(function() { 
    $('.case').attr('checked', this.checked).each(function() { 
     contacts.push($(this).val()) 
    }); 
}); 

Answer 2

Я знаю, что это не совсем ответит на вопрос, используя детей, но вы можете использовать $('#tbody').find('input'), чтобы найти все поля ввода внутри элемента.

Answer 3

Вот рабочий пример:

var contacts = []; 

// add multiple select/deselect functionality 

$("#selectall").click(function() { 
    var els = $('.case') 
    if (els.first().is(':checked')) { 
     els.prop('checked', false); 
     $('#arrayContent').empty(); 
    } else { 
     els.attr('checked', true); 
     $.each(els, function(index, el) { 
      contacts.push($(el).val()); 
     }); 
     $('#arrayContent').empty(); 
     $('#arrayContent').append(contacts.join(', ')); 
    } 
    //contacts.push($('#tbody').children(tr > td > input).val();) 
}); 

// if all checkbox are selected, check the selectall checkbox 
// and viceversa 

$(".case").click(function() { 

    var $tr = $(this).closest("tr"); 
    var id = $tr.data('coworker-id'); 

    contacts.push(id); 

    $('#arrayContent').empty(); 
    $('#arrayContent').append(contacts+','); 

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

}); 

и здесь скрипку ссылка :: http://jsfiddle.net/kkemple/7LCjH/24/

Answer 4

Вы можете попробовать это

$("#selectall").click(function() { 

if($('.case:checked').length == $('.case').length){ 
    //deselect all 
    $('.case').removeAttr("checked"); 
    contacts = []; 
} 
else{ 
    //select all 
    $('.case').attr("checked", "checked").each(function(){ 

     var $tr = $(this).closest("tr"); 
     var id = $tr.data('coworker-id'); 

     contacts.push(id); 

    }) 
}  




$('#arrayContent').empty(); 
$('#arrayContent').append(contacts.join(',')); 
//contacts.push($('#tbody').children(tr > td > input).val();) 
}); 

jsFiddle

Answer 5

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

$("#selectall").click(function() { 
    $('.case').attr('checked', this.checked); 
    $('tbody').find("input").each(function() { 
    contacts.push($(this).val()+","); 
    }); 
    $('#arrayContent').append(contacts); 
}); 

.find() и .children() методы аналогичны, за исключением того, что последний только путешествует один уровень вниз по дереву DOM.

Источник: http://api.jquery.com/find/