Question

在ASP.NET MVC屏幕中，我正在使用jQuery AJAX填充表格，其中复选框为第一列。

提交表单后，我需要获取用户选择的所有记录的列表。当我尝试准备有关提交按钮的单击事件的列表时，它无法识别复选框。所有记录均显示为未选中。

<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>

如何遍历行并验证选中了所有行？

Answer 1

我看到了：

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

td:eq(0)表示单元格引用，因此您正在检查单元格的选中属性。我想你想要

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

如果该单元格中只有一个输入，请选中prop("checked")。

Answer 2

要检查是否已选中复选框，我使用以下代码：

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

一个例子：

$(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>

Answer 3

如果只希望选中复选框的行，则可以执行以下操作：

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

语法可能并不完美：）

如何在jQuery中检查复选框是否已选中

3 个答案: