javascript - 如何使用 jQuery 选择所有 tbody 输入值的值

Question

所以我有一些复选框，当选中每个复选框时，我可以从关联的表行中获取所需的 ID 号，并将它们放入我的 contacts 数组中。

我还有一个全选复选框，用于获取所有 ID 号并将它们粘贴到同一个数组中。

在尝试找出正确的语法来定位 tbody、选择每个表行的数据 ID 或每个表行的输入值时遇到了一些麻烦。

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

^ 在我的 fiddle 示例中，您可以看到数字被添加到我的数组(或用于可视化的灰色 div)中。

<小时/>如何从“全选”复选框中获取 tbody 行中的所有 ID 号？

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())
    });
});