使用客户端脚本处理RadioButtonList
Handling RadioButtonList with client-side scripting
我有一个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/
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- keyup事件处理程序更改焦点不适用于快速键入
- 如何使用jquery处理php循环通过元素
- angular.js没有'无法在PhoneGap中处理视图标记
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 提示使用服务器端事件处理程序激活JavaScript
- javascript:如何在antlr生成的Lexer中进行错误处理
- 如何编写一个具有公共标头的批处理
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何处理node.js节点mongodb中的连接和查询队列
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- 如何处理10页以上的静态页眉/页脚
- 将事件处理程序绑定到任何可能的事件
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- python到“;流“;字典处理
- 使用javascript进行实时图像处理
- 导入jQuery脚本获胜'我不处理html文件
- Javascript无法处理表单提交
- 在承诺链中处理早期回报的最佳方式
- 正在将事件处理程序添加到不存在的类