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

Select data attribute from row only for rows with checked checkboxes

本文关键字：行选 选择 数据属性 复选框      更新时间：2023-09-26

我有一个表有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);
});

你可以这样做:

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

它还在迭代，但只迭代选中的行。

您可以使用:

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