Question

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

感谢my previous StOf posting，我有一个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（在控制台中确认）包含checked元素中的input属性。 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>

我也尝试过：

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

确实产生了一系列复选框元素，但我仍然无法弄清楚如何正确过滤checked属性以及如何回到管理tr元素。

来源：

https://stackoverflow.com/a/6013026/2615836

https://stackoverflow.com/a/6068768/2615836

Answer 1

你去...... http://jsfiddle.net/tdyhq8z7/2/

$(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();
        }
    })
});

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

1 个答案: