Question

我的表有2列：复选框和名称。

<table id="data">
    <tr class="header">
        <th>
            <input type="checkbox" class="download" />
        </th>
        <th>Name</th>
    </tr>
    <tr data-id="1">
        <td>
            <input type="checkbox" class="download" />
        </td>
        <td>One</td>
    </tr>
    <tr data-id="2">
        <td>
            <input type="checkbox" class="download" />
        </td>
        <td>Two</td>
    </tr>
    <tr data-id="3">
        <td>
            <input type="checkbox" class="download" />
        </td>
        <td>Something</td>
    </tr>
</table>

我想从已选中复选框的行中选择数据属性。现在我这样做：

$(document).on('click', "#select", function (e) {
    var mydata=[];
    $.each($('#data tbody tr:not(.header)'), function(i, row) {
        if($(row).find('input[type=checkbox]').is(":checked"))
            mydata.push($(row).data('id'));
        });

    console.log(mydata);
});

这样可以正常工作，但这可以做得更好/更快吗？这是我的工作演示：http://jsfiddle.net/Misiu/yytR2/2/

另外，当取消选中正文中的一个或多个复选框时，如何取消选中标题中的复选框，并在检查所有复选框时检查它？

编辑：我的最终工作代码（感谢@tymeJV）：

$(document).on('change', "#data tr.header input.download", function (e) {
    $('#data tbody tr:not(.header) input.download').prop('checked', $(this).is(":checked"));
});

$(document).on('change', "#data tr:not(.header) input.download", function (e) {
    if ($(this).is(":checked") && $('#data tr:not(.header) input.download:not(:checked)').length == 0) {
        $('#data tbody tr.header input.download').prop('checked', true);
    } else {
        $('#data tbody tr.header input.download').prop('checked', false);
    }
});

$(document).on('click', "#select", function (e) {
    var rows = $("#data tr:not(.header) td input:checked").map(function () {
        return $(this).closest("tr").data("id");
    }).get();
    console.log(rows);
});

Answer 1

你可以这样做：

var rows = $("#data tr:not(.header) td input:checked").map(function() {
    return $(this).closest("tr").data("id");
}).get();

它迭代但是只检查了行。

Answer 2

您可以使用：

 $(".download:checkbox").map(function() {
    return $(this).parents('tr').data('id');
 }).get()

仅对具有选中复选框的行的行选择数据属性

2 个答案: