Question

I have these table rows that have checkboxes:

@foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceDate, "{0:D}")
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Organisation.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TotalExcludingGst)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ExportedDateTime)
                </td>
                <td class="centered">
                    <input type="checkbox" name="ids" value=@item.InvoiceId />
                </td>
            </tr>
        }

What I’m trying to do is when the user clicks a certain button make those rows dissapear / invisible.

So I wrote some jquery:

$("#btnexport").click(function () {

        $('input:checkbox:checked').each(function (index) {

        });
    });

So I’m thinking what this will do is on the button click get all the checked checkboxes which is good. I’m hoping to add to it though so that for each of these checkboxes it will find the associated trs and make those bad boys invisible.

Anyone able to help me out on this one?

Answer 1

Try the following:

$("#btnexport").click(function () {
  $('#idOfTable').find('input:checkbox:checked').closest('tr').hide();
});