[英]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);
})
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.