lundi 6 mai 2019

How to check whether checkbox is checked or not in jQuery

In an ASP.NET MVC screen, I am populating a table using jQuery AJAX with checkbox as first column.

Once the form is submitted, I need to get the list of all records which are selected by the user. When I try to prepare a list on click event of submit button, it is not recognizing the checked boxes. All records being shown as unchecked.

<div class="row">
        <div class="col-sm-10">
            <table class="table table-striped" id="CarData">
                <thead>
                    <tr>
                        <th>Select</th>
                        <th>Model</th>
                        <th>Owner</th>
                        <th>Color</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <button type="submit" class="btn btn-primary" value="Submit">Submit</button>
    </div>

<script>
        $(document).ready(function () {

            $("#btnSubmit").on("click", function () {
                $("#CarData tbody").find('tr').each(function () {
                    var currRow = $(this);
                    if (currRow.find("td:eq(0)").prop('checked') == true) {
                        var col2 = currRow.find("td:eq(1)").text;
                        var col3 = currRow.find("td:eq(2)").text;
                    }
                });
            });

            $("#car").on("change", function () {
                $.ajax({
                    url: "api/Home/GetTableDetails/",
                    contentType: "application/json; charset-utf-8",
                    datatype: "Json",
                    method: "GET",
                    data: {
                        Id: $("#car").val()
                    },
                    success: function (data) {
                        var table = $("#CarData");
                        table.find("tbody tr").remove();
                        $.each(data, function (index, value) {
                            $("#CarData tbody").append("<tr>" +
                                "<td><input type='checkbox' name = 'carRow'></td>" +
                                "<td>" + value.Model + "</td>" +
                                "<td>" + value.Owner + "</td>" +
                                "<td>" + value.Color + "</td>" +
                                "</tr > ")
                        });
                    }
                });
            });
        });
    </script>

How to iterate through the rows and verify which all rows are checked?




Aucun commentaire:

Enregistrer un commentaire