使用客户端脚本处理RadioButtonList

Handling RadioButtonList with client-side scripting

本文关键字:处理 RadioButtonList 脚本 客户端      更新时间:2023-09-26

我有一个ASP RadioButtonList,我想处理客户端。

该网页包含一个带有单选按钮组和关联GridView的表单。当用户选择其中一个单选按钮时,我希望在GridView上隐藏或显示行。(这些行必须隐藏,而不是通过回发从数据集中过滤出来,因为在用户提交表单时会进行处理。)

感谢StOf和其他网站,以下是我到目前为止所拥有的。

我的客户端脚本由于无法识别Value而出错("无法读取未定义的属性'Value'。")

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

我的RadioButtonList在设计时:

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

以及由此产生的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>

我一直在试图找到一些方法来获得所选按钮的值,而不是在列表中迭代,但到目前为止还没有成功。我还尝试了一种JQuery方法,它将在页面加载时运行,但我无法通过选择单选按钮来触发断点。(我相信还有更好的JQuery方法。):

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

试试这样的东西:

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

工作小提琴:http://jsfiddle.net/robertrozas/tdyhq8z7/1/