如何在 WebGrid 中查找单个复选框的选中状态答案

【问题标题】：How to find a single checkbox's checked state in a WebGrid如何在 WebGrid 中查找单个复选框的选中状态
【发布时间】：2019-07-03 20:52:46
【问题描述】：

这是我的 WebGrid，带有一个 id = chkbox1 的复选框列：

@grid.GetHtml(htmlAttributes:=New With {.id = "grid", .class = "table table-bordered table-striped table-condensed", .name = "grid1"},
                            emptyRowCellValue:="No Records Found",
                            headerStyle:="grid-header",
                            columns:=grid.Columns(
                            grid.Column(header:="Select", format:=Function() Html.CheckBox("chkboxname", htmlAttributes:=New With {.id = "chkbox1", .value = "Item"})),
                            grid.Column("item_id", "Item ID"),
                            grid.Column("item_desc", "Description")))

以下是将 WebGrid 转换为 json 对象的函数：

<script>
                document.getElementById("btnGetRows").addEventListener("click", getTableData);

                function getTableData() {
                    //debugger;
                    var _griddata = gridTojson();
                    var url = '@Url.Action("GetGridViewRows")';
                    alert(_griddata);
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: { griddata: _griddata }
                    }).done(function (data) {
                        if (data != "") {
                            $('#grid').html(data);
                        }
                    });
                }

                function gridTojson() {
                    var json = '{';
                    var otArr = [];

                    var tbl2 = $('#grid tbody tr').each(function (i) {
                        var chkbox2 = $("#chkbox1").is(":checked");
                        //var chkbox = document.getElementById("chkbox1"); //tried this too
                        if ($(this)[0].rowIndex != 0) {
                            if (chkbox2) {
                                x = $(this).children();
                                var itArr = [];
                                x.each(function () {
                                    if ($(this).children('input').length > 0) {
                                        itArr.push('"' + $(this).children('input').val() + '"');
                                    }
                                    else {
                                        itArr.push('"' + $(this).text() + '"');
                                    }
                                });
                                otArr.push('"Row' + i + '": [' + itArr.join(',') + ']');
                            }
                        }
                    })
                    json += otArr.join(",") + '}'
                    return json;
                }
            </script>

我想要做的是循环并获取选中复选框的任何行并将行数据存储在 json 对象中。如果我选中 WebGrid 上的所有复选框，“if”语句就会变为 true。即使复选框具有相同的 ID，它是否仍然可以工作，因为 var chkbox2 = $("#chkbox1").is(":checked") 在循环中并且每次都会重置它？

【问题讨论】：

标签： javascript jquery ajax vb.net model-view-controller

【解决方案1】：

诀窍是这样做：

                           if ($(this).find("td").children().is(":checked")) {
                                x.each(function () {
                                    if ($(this).children('input').length > 0) {
                                        itArr.push('"' + $(this).children('input').val() + '"');
                                    }
                                    else {
                                        itArr.push('"' + $(this).text() + '"');
                                    }
                                });
                            }

而不是这个：

                    var chkbox2 = $("#chkbox1").is(":checked");
                    if ($(this)[0].rowIndex != 0) {
                        if (chkbox2) {
                            x = $(this).children();
                            var itArr = [];
                            x.each(function () {
                                if ($(this).children('input').length > 0) {
                                    itArr.push('"' + $(this).children('input').val() + '"');
                                }
                                else {
                                    itArr.push('"' + $(this).text() + '"');
                                }
                            });
                            otArr.push('"Row' + i + '": [' + itArr.join(',') + ']');
                        }
                    }

【讨论】：