Handling RadioButtonList with client-side scriptin

问题:

I have an ASP RadioButtonList that I want to handle client-side.

The web page contains a form with a radio button group and an associated GridView. When the user selects one of the radio buttons, I want to hide or show rows on the GridView. (The rows must be hidden, as opposed to filtered out of the dataset via postback, because of processing that takes place when the user submits the form.)

Thanks to StOf and other sites, here's what I have so far.

My client-side script errors out by failing to recognize Value ("Cannot read property 'Value' of undefined.")

function update_grid(rbList) {
    var parameter = rbList.SelectedItem.Value;

    var grd = $("#my_gridview");
    var rows = $("#my_gridview tr:gt(0)");
    switch (parameter) {
        case "All":
            {
                rows.show().all;
            }

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

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

    }
}

My RadioButtonList at design time:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="javascript:update_grid( this );>
    <asp:ListItem Selected="True" Value="All">Show All</asp:ListItem>
    <asp:ListItem Value="Hide">Hide Checked</asp:ListItem>
    <asp:ListItem Value="Show">Show Only Checked</asp:ListItem>
</asp:RadioButtonList>

And the resulting HTML:

<table id="RadioButtonList1" onclick="update_grid(this);">
    <tr>
        <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="All" checked="checked" /><label for="RadioButtonList1_0">Show All</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="Hide" /><label for="RadioButtonList1_1">Show Unchecked</label></td>
    </tr><tr>
        <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="Show" /><label for="RadioButtonList1_2">Show Only Checked</label></td>
    </tr>
</table>

I've been trying to find some way to get the selected button's value short of iterating through the list, but no luck so far. I have also tried a JQuery approach, which would run on page load but I couldn't get a breakpoint to trigger by selecting a radio button. (I'm sure there's a better JQuery approach.):

$(document).ready(function () {
    $('#RadioButtonList1_All').on('change', function () {
        $("#tbl tr").show();
    });
    $('#RadioButtonList1_Hide').on('change', function () {
        var grd = $("#my_gridview");
        var rows = $("#my_gridview tr:gt(0)");
        var rowToShow = rows.find("td:eq(0)").filter(chk_ischecked == false);
        rows.show().not(rowToShow).hide();
    });
    $('#RadioButtonList1_Show').on('change', function () {
        var grd = $("#my_gridview");
        var rows = $("#my_gridview tr:gt(0)");
        var rowToShow = rows.find("td:eq(0)").filter(chk_ischecked == true);
        rows.show().not(rowToShow).hide();
    });
});

回答1:

Try something like this:

$(function(){
$("#RadioButtonList1 input[id^=Radio]").click(function(){
    alert(this.value);
})
});

Working fiddle: http://jsfiddle.net/robertrozas/tdyhq8z7/1/