与客户端脚本处理单选按钮列表 [英] Handling RadioButtonList with client-side scripting
问题描述
我有一个ASP单选按钮列表，我要处理的客户端。
该网页包含一个单选按钮组和相关的GridView的一种形式。当用户选择一个单选按钮，我想隐藏或显示在GridView控件行。 （该行必须被隐藏，而不是过滤掉回发通过数据集，因为加工，发生在用户提交表单的。）
由于STOF和其他网站，这里就是我有这么远。</ P>
我的客户端脚本错误了，未能认识到值（不能读取属性未定义的'价值'。）
函数update_grid（rbList）{
变量参数= rbList.SelectedItem.Value; VAR GRD = $（＃my_gridview）;
VAR行= $（＃my_gridview TR：GT（0））;
开关（参数）{
案全部：
{
rows.show（）所有。
} 案隐藏：
{
。变种rowToShow = rows.find（TD：当量（0））滤波器（chk_ischecked == FALSE）;
。rows.show（）否（rowToShow）.hide（）;
} 案秀：
{
。VAR rowToShow = rows.find（TD：EQ（0））过滤器（chk_ischecked == TRUE）;
。rows.show（）否（rowToShow）.hide（）;
} }
}
我的单选按钮列表在设计时：
＆LT; ASP：RadioButtonList的ID =RadioButtonList1=服务器的onclick =JavaScript的：update_grid（本）;＆GT;
＆LT; ASP：列表项选择=真值=全部＆gt;显示所有的＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=隐藏＆GT;隐藏经过＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的值=显示＆gt;显示只有最好的＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：RadioButtonList的＆GT;
和生成的HTML：
＆LT;表ID =RadioButtonList1的onclick =update_grid（本）;＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入ID =RadioButtonList1_0类型=电台NAME =RadioButtonList1值=全部检查=选中/＆GT;＆LT;标签=RadioButtonList1_0＆gt;显示所有的＆LT; /标签＆gt ;＆LT; / TD＆GT;
＆所述; / TR＆GT;＆下; TR＆GT;
＆LT; TD＆GT;＆LT;输入ID =RadioButtonList1_1类型=电台NAME =RadioButtonList1VALUE =隐藏/＆GT;＆LT;标签=RadioButtonList1_1＆gt;显示未选中＆LT; /标签＆gt;＆LT; / TD＆GT ;
＆所述; / TR＆GT;＆下; TR＆GT;
＆LT; TD＆GT;＆LT;输入ID =RadioButtonList1_2类型=电台NAME =RadioButtonList1VALUE =显示/＆GT;＆LT;标签=RadioButtonList1_2＆gt;显示只有最好的＆LT; /标签＆gt;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
我一直在试图找到一些方式来获得在列表遍历的选择按钮的值短，但至今没有运气。我也曾尝试jQuery的方法，这将在页面加载运行，但我不能让一个断点通过选择单选按钮来触发。 （我敢肯定有一个更好的JQuery的方法。）：
$（文件）。就绪（函数（）{
$（'＃RadioButtonList1_All'）。在（'变化'，函数（）{
$（＃TBL TR）显示（）。
}）;
$（'＃RadioButtonList1_Hide'）。在（'变化'，函数（）{
VAR GRD = $（＃my_gridview）;
VAR行= $（＃my_gridview TR：GT（0））;
。变种rowToShow = rows.find（TD：当量（0））滤波器（chk_ischecked == FALSE）;
。rows.show（）否（rowToShow）.hide（）;
}）;
$（'＃RadioButtonList1_Show'）。在（'变化'，函数（）{
VAR GRD = $（＃my_gridview）;
VAR行= $（＃my_gridview TR：GT（0））;
。VAR rowToShow = rows.find（TD：EQ（0））过滤器（chk_ischecked == TRUE）;
。rows.show（）否（rowToShow）.hide（）;
}）;
}）;
尝试是这样的：
$（函数（）{
$（＃RadioButtonList1输入[ID = ^收音机]）。点击（函数（）{
警报（THIS.VALUE）;
}）
}）;
工作小提琴： http://jsfiddle.net/robertrozas/tdyhq8z7/1/
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();
});
});
Try something like this:
$(function(){
$("#RadioButtonList1 input[id^=Radio]").click(function(){
alert(this.value);
})
});
Working fiddle: http://jsfiddle.net/robertrozas/tdyhq8z7/1/
这篇关于与客户端脚本处理单选按钮列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
