如何使用jQuery選擇所有tbody輸入值的值

Question

所以我有一些復選框，當每個復選框都選中時，我可以從關聯的表行中獲取所需的ID號並將其放入我的contacts數組中。

我還有一個“全選”復選框 ，用於獲取所有ID號並將其粘貼到同一數組中。

嘗試找出針對tbody的正確語法，選擇每個表行的data-id或每個表行的輸入值時遇到麻煩。

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

^在我的小提琴示例中，您可以看到數字已添加到我的數組（或可視化的灰色div）中。

---

您將如何從“全選”復選框的tbody行中獲取所有ID號？

jQuery的

<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>

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

這是一個工作示例：

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 3

你可以試試這個

$("#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 4

使用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/

Answer 5

我知道這不能完全解決使用子項的問題，但是您可以使用$('#tbody').find('input')查找元素中的所有輸入字段。