Acting on the rows in a gridview based on a checkbox field

Question

I have a GridView, where the first field is a checkbox. I want to take action client-side (show or hide rows) depending on the state of the checkboxes.

Thanks to my previous StOf posting, I have a RadioButtonList properly firing my Javascript. Now it's a matter of obtaining a reference to the appropriate rows.

I have relied on several questions and answers to build my current 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();
                }

        }
    })
});

But when I run this, I get an error in the JS console: ReferenceError: checked is not defined. Which is odd, because it works in the other questions, and the generated HTML (as confirmed in the console) includes the checked property in the input element. The HTML is:

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

I have also tried:

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

Which did produce an array of the checkbox elements, but I still couldn't figure out how to correctly filter for the checked property nor how to get back to the governing tr element.

Sources:

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

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

Koti Panga · Accepted Answer · 2014-10-03T17:40:26.550

1

Here you go... 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();
        }
    })
});

edited Oct 03 '14 at 17:40

answered Oct 02 '14 at 23:45

Koti Panga

3,660
2
18
21

That works like a charm, thanks. Please teach me why it works -- what does the `>:` operator do? It sounds like "search `td` for the element `checkbox`. – Codes with Hammer Oct 03 '14 at 13:32
updated $('td>:checkbox',this) to $('td:first>:checkbox',this) to go with only first "td" in "tr". – Koti Panga Oct 03 '14 at 17:43
$('td:first>:checkbox',this) here "this" referes the current row node "tr". "td:first" gives only first "td" in the "tr". 'td:first>:checkbox' selector gives the "checkbox input element" child(> is child selector) in the "first td" of the "tr". Please refer [http://api.jquery.com/child-selector/](http://api.jquery.com/child-selector/) – Koti Panga Oct 03 '14 at 17:48

Acting on the rows in a gridview based on a checkbox field

1 Answers1