How to check whether checkbox is checked or not in jQuery

Question

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?

`text()` is a method. Though `col2, col3` are scoped to the each and are not used. — Taplar, May 06 '19 at 17:03
to get all of the checked boxes in the row try this `var selected = currRow.children(':checked');` — Michael Cacciano, May 06 '19 at 17:12
Possible duplicate of [How to check whether a checkbox is checked in jQuery?](https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery) — Heretic Monkey, May 06 '19 at 17:17

score 1 · Answer 1 · answered May 06 '19 at 17:15

I see this:

if (currRow.find("td:eq(0)").prop('checked') == true) {

td:eq(0) means the cell reference, so you are checking the checked attribute of the cell. I think you want:

.find("td:eq(0) input")

If only one input in the cell, and check prop("checked") on that.

score 0 · Answer 2 · answered May 06 '19 at 17:26

For checking whether checkboxes are checked or not, I use the following code:

if($(".check:checked").length>0)

An example:

$(function(){
$(".check").on("click",function(){
if($(".check:checked").length>0){
alert($(this).attr("id"));
}
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Checkbox 1<input type="checkbox" class="check" id="check1"><br>
Checkbox 2<input type="checkbox" class="check" id="check2"><br>
Checkbox 3<input type="checkbox" class="check" id="check3"><br>
Checkbox 4<input type="checkbox" class="check" id="check4"><br>
Checkbox 5<input type="checkbox" class="check" id="check5"><br>
</form>

score 0 · Answer 3 · answered May 06 '19 at 17:59

0

If you are just wanting the rows that's check boxes are selected, you can do something like:

var rows[] = $('.checked:checked').map(function(i, chk) { 
    return $(chk).parents('tr');
});

Syntax may not be perfect :)

answered May 06 '19 at 17:59

Adam A.

19
4

How to check whether checkbox is checked or not in jQuery

3 Answers3