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 (i.e – 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.