Question

我有一个包含汽车列表的数据表。 html中的每一行都包含一个Car ID。我已将复选框列添加到我的数据表中的第一个单元格 - 如果选中该行，则高亮显示该行以指示用户已选择该行。我要做的就是在点击页面上的按钮时获取用户选择的所有汽车的所有ID。（表格行中还有其他列，我有复选框（即 - 一个手动列或一个自动列，它将被检查 - 如表5第6列中所示）

所以这是我页面的cshtml的一部分..

@foreach (var car in Model.Cars)
{
    <tr carId="@Html.DisplayFor(modelItem => car.CarID)">
       <td class="table-data">
            <input id="SelectIndividual" name="Select" type="checkbox" />
        </td>

//more stuff set in other tds in table

然后这是我到目前为止页面的JS。

$('#GetSelectedCars').click(function (event) {

    var cars= new Array();

    carsListTable.find("tr").each(function (index, para) {

        $('tr').find('td:input:checked:first').each(function () {
            var car= new Object();
            alert($(this).parent().parent().attr("carId"));
            car.ID = $(this).parent().parent().attr("carId");
            cars.push(car);
        });

    });

    var jsonString = $.toJSON(cars);

我想然后将json字符串返回给我的控制器（我通过将值传递到模型上的隐藏字段然后反序列化来实现这一点 - 但是在我得到它为空的那一刻。我的问题是获得最好的如果检查了行，则从行中获取id？

Answer 1

您可以使用选择器:checkbox :checked并使用jQuery.map转换数组。 jQuery.closest()方法将给出与给定选择器匹配的最近祖先。

var cars = carsListTable.find('.table-data :checkbox:checked').map(function(i, v){
    return {
        ID : $(v).closest('tr').attr('carId')
    }
});

演示Fiddle

注意：元素的id在文档中应该是唯一的，因此id的{{1}}应该被删除或者必须加上后缀，或者以汽车ID之类的动态值作为前缀。

Answer 2

首先，您应该使用class而不是id来存在多次出现的元素。我建议在复选框输入中更改#SelectIndividual的{{1}}。您应该更改的另一件事是.SelectIndividual属性，因为它不具有语义有效性。您应该使用custom data attributes代替。这就是你的代码的样子：

HTML

carId

Jquery的

@foreach (var car in Model.Cars)
{
    <tr data-carID="@Html.DisplayFor(modelItem => car.CarID)">
       <td class="table-data">
            <input id="SelectIndividual" name="Select" type="checkbox" />
        </td>

Answer 3

我建议使用有效HTML5的data-*属性以及汽车id的jQuery .data()方法。

Answer 4

您可以为第一列中的所有复选框分配一个类，然后尝试此

$('.cbClass:checked').each(function () {
    tr = $(this).closest('tr');

    // use the row
})

如果选中，则获取表格行的ID？

4 个答案:

HTML

Jquery的