获取表行的ID（如果选中）？

Question

I have a datatable containing a list of Cars. each row in the html contains a Car ID. I have added checkbox column to the first cell in my datatable - if it is checked the row is highligted to indicate to the user they have selected that row. What I waht to do is get all the IDs of all the cars a user has selected on clicking a button on the page. (also there are other columns in the table row where I have checkboxes (ie - a Manual column or an Automatic column which will somtime be checked - like in column 5 ot 6 in the table)

so this is part of the cshtml for my page..

@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

Then this is the JS I have for the page so far.

$('#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);

I want to then return the json string to my controller (I do this by passing the value into a hidden field on my model and then deserialize - but at the minute I am getting it as empty. My problem is getting the best way to get the id from the row if it is checked?

Answer 1

You can use the selectors :checkbox :checked and use the jQuery.map to convert the array. The jQuery.closest() method will give the closest ancestor matching the given selector.

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

Demo Fiddle

Note: The id of elements should be unique in a document so the id of the checkbox should be removed or has to be suffixed or prefixed by a dynamic value like the car id.

Answer 2

First, you should use class instead id for elements that will be present more than once. I suggest change #SelectIndividual for .SelectIndividual on the checkbox input). Another thing you should change is the carId attribute, because is not semantic valid. You should use custom data attributes instead. This is how your code should look like:

HTML

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

Jquery

$('#GetSelectedCars').click(function (event) {
    var cars= new Array();
    $('SelectIndividual:checked').each(function () {
        var car= new Object();
        car.ID = $(this).parent().parent().data('carID'); 
        cars.push(car);
    });
});
//keep doing things

Answer 3

我建议将有效的HTML5的data- *属性以及jQuery .data（）方法用于汽车的ID。

Answer 4

Can you assign a class to all checkboxes in first column and then try this

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

    // use the row
})