Javascript 基于复选框字段对gridview中的行进行操作

我有一个GridView，其中第一个字段是一个复选框。我想根据复选框的状态在客户端执行操作（显示或隐藏行）

多亏了，我有一个RadioButtonList正确地启动了我的Javascript。现在的问题是获取对适当行的引用

我依靠几个问题和答案来构建我当前的Javascript：

$(function () {
    $("#RadioButtonList1 input[id^=Radio]").click(function () {
        var grd = $("#my_gridview");
        var rows = $("#my_gridview tr:gt(0)");

        switch (this.value) {
            case "All":
                {
                    $("#my_gridview tr").show();
                }

            case "HideRequested":
                {
                    var rowToShow = rows.find("td:eq(0)").filter(checked != "checked");
                    rows.show().not(rowToShow).hide();
                }

            case "ShowRequested":
                {
                    var rowToShow = rows.find("td:eq(0)").filter(checked == "checked");
                    rows.show().not(rowToShow).hide();
                }

        }
    })
});

但是当我运行此命令时，JS控制台中出现一个错误：ReferenceError:checked未定义。这很奇怪，因为它适用于其他问题，并且生成的HTML（在控制台中确认）在

input

元素中包含

checked

属性。HTML是：

<table cellspacing="0" cellpadding="2" id="gv_grid" style="border-color:Black;border-width:1px;border-style:None;width:100%;border-collapse:collapse;">
    <tr class="grGridViewHeader" style="white-space:nowrap;">
        <th align="center" scope="col" style="width:100px;white-space:nowrap;">Select Entry</th><th scope="col">Entry Name</th><th align="left" scope="col">Type</th><th align="left" scope="col">Details</th>
    </tr><tr valign="top" style="background-color:#BED3FC;border-style:None;">
        <td align="center" valign="middle" style="white-space:nowrap;">
                        <input id="gv_grid_chk_selected_0" type="checkbox" name="gv_grid$ctl02$chk_selected" checked="checked" />
                    </td><td>Entry 1</td><td style="font-size:Small;">Foo</td><td style="font-size:Small;">Assorted text.</td>
    </tr><tr valign="top" style="background-color:White;border-style:None;">
        <td align="center" valign="middle" style="white-space:nowrap;">
                        <input id="gv_grid_chk_selected_1" type="checkbox" name="gv_grid$ctl03$chk_selected" checked="checked" />
                    </td><td>Entry 2</td><td style="font-size:Small;">Bar</td><td style="font-size:Small;">Assorted text.</td>
    </tr><tr valign="top" style="background-color:#BED3FC;border-style:None;">
        <td align="center" valign="middle" style="white-space:nowrap;">
                        <input id="gv_grid_chk_selected_2" type="checkbox" name="gv_grid$ctl04$chk_selected" checked="checked" />
                    </td><td>Entry 3</td><td style="font-size:Small;">Baz</td><td style="font-size:Small;">Assorted text.<br /></td>
    </tr>
</table>

它确实生成了一个checkbox元素数组，但我仍然不知道如何正确过滤

checked

属性，也不知道如何返回到控制

tr

元素

资料来源：

给你

---

那很有魅力，谢谢。请告诉我它为什么工作-

：

操作符是做什么的？它听起来像是“搜索

td

元素

checkbox

。将$（'td>：checkbox'，this）更新为$（'td:first>：checkbox'，this）以在“tr”中只包含第一个“td”。$（'td:first>：checkbox'，this）这里“this”引用当前行节点“tr”。.td:first”只给出“tr”中的第一个“td”。'td:first>：checkbox”选择器给出复选框在“tr”的“第一个td”中输入元素“child（>是子选择器）。请参阅

var checkboxArray = $('#my_gridview td input:checkbox');

$(function () {
    $("#RadioButtonList1 :radio").click(function () {
        var $rows = $("#gv_grid tr:gt(0)").show();
        switch (this.value) {
            case "HideRequested":
                $rows.filter(function(){
                    return $('td:first>:checkbox',this).is(":checked")
                }).hide();
                break;
            case "ShowRequested":
                $rows.filter(function(){
                    return !$('td:first>:checkbox',this).is(":checked")
                }).hide();
                break;
        }
    })
});

//another solution:
$(function () {
    $("#RadioButtonList1 :radio").click(function () {
        var $rows = $("#gv_grid tr:gt(0)").show(), $val=this.value;
        if(this.value != "All"){
            $rows.filter(function(){
                var $checked = $('td:first>:checkbox',this).is(":checked");
                if($val == "HideRequested") return $checked;
                else if($val == "ShowRequested") return !$checked;
            }).hide();
        }
    })
});