Question

Say I have a table with of clients with multiple checkboxes:

@foreach (var item in Model.Clients)
    {          
        <tr class="@highlightRowClass" data-clientnumber="@item.ClientNumber">  
            <td>
                @Html.CheckboxFor(modelItem => item.Checkbox1)
            </td>
            <td>
                @Html.CheckBoxFor(modelItem => item.CheckBox2)
            </td>
        </tr>
     }     

I want to have an ajax call the posts back the array of ids with an object that represents if one or both of the checkboxes are ticked:

             var obj = {
                CheckBox1Ticked: true, 
                Checkbox2Ticked: false,
            };
            pendingChanges[clientId] = obj ; 

How would I loop through each table row and populate the array using Jquery?

Answer 1

You can populate the array like this:

var checkboxData = $('table tr').map(function() {
    var $inputs = $(this).find('input');
    return { checkbox1Ticked: $inputs.eq(0).prop('checked'), checkbox2Ticked: $inputs.eq(1).prop('checked') };
});

checkboxData is then an array you can pass/interrogate as required:

console.log(checkboxData[0].checkbox1Ticked);