jQuery的 RadioButtonList
首先介紹程序規則：
1.對以下的選擇進行檢查，檢查是否全部選中
2，所謂的“全部選中”是指，一行中三個radiobutton必須有一個radiobutton被選中。
3. 這里一共有33個radiobutton，每三個為一組；
以下界面里面的所有元素都是從后臺生成的（當然也可以前臺生成），后面我會把生成的代碼也附上。僅參考：）
首先看一下Html代碼結構：
一開始我為了進行（選擇、未選擇）Check之前,必須先找到相應的對象。
從Html Render的結果來看，每個radiobuttonList生成出來的Html代碼：
都是一個table，此table有三列，每列有一個type為radio的radioButton.
這樣的話，有整個生成出來的結果，就會有11個table,每個table有3個radiobutton，一共33個radiobutton.
那我們想找到table對象為ctl14，這就可以用到Jquery強大選擇器進行相應查找工作：
$("#Table1").find($("table[id=ctl14]"))
好了，我現在可以找到第一個對象了，那其他table對象也就可以容易找到了。
這樣,注意的每個生成table的對象id都是以ctl開頭的，這樣的話，查找每個table的JQ – Code:
$("#Table1").find($("table[id^=ctl]"))
好了，現在我們已經找到了每個table一級了；
接下來，我只要在找每個table中radiobutton對象就可以進行(選擇、未選擇)Check了.
代碼為：
$("table[id^=ctl] input[type=radio]") 或者
$("table[id^=ctl]").find("input[type=radio]")
到這里我們所有要的對象都找到。是不是很輕松。
$("#").click(function() {
var flag = true;
//alert($("table[id^=ctl]").length);
//創建一個checked的arr數組，用于存儲每個radiobutton的checked情況
var arr = new Array;
$("table[id^=ctl] input[type=radio]").each(function(i) {
arr.push(this.checked);
});
//然后再創建一個arrTrue數組，用于過濾false的arr數組
var arrTrue = new Array;
$.each(arr, function(i) {
if (arr[i] == true) {
arrTrue.push(arr[i]);
}
});
//當然也可以用grep函數，來簡化過濾arr數組操作
//arr = $.grep(arr, function(n, i) {
//return n == true;
//});
var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);
//最后，簡單一點吧，只有判斷arrTrue的長度是否為11，就可以。
//因為是一共33個radiobutton,每3個為一組，規則又是一組中3選1，
//所以全部選擇肯定有11個radiobutton被選中。
if (arrTrue.length != groupLen) {
flag = false;
}
return false;
});
完整代碼:
$(function() {
$("#").click(function() {
var flag = true;
var arr = new Array;
$("table[id^=ctl] input[type=radio]").each(function(i) {
arr.push(this.checked);
});
arr = $.grep(arr, function(n) {
return n == true;
});
var groupLen = Math.floor($("table[id^=ctl]").length + 1 / 3);
if (arr.length != groupLen) {
flag = false;
}
return false;
});
});
最后附上生成Table代碼：(兩種生成方法，JQuery版本,C#版本) – (可看可不看)
JQuery版本
var array = ["XXXX",""XXXX","XXX"]; $.each(array, function(i) { table.append(""+ " + " type='checkbox' title='" + array[0] + "' />" + ""); });
C#版本
private void DynamicCreateTable () { NameValueCollection titleList = ConfigurationManager.GetSection ( sectionName
) as NameValueCollection; { for ( int i = 0 ; i < titleList.Count ; i++ ) { HtmlTableRow tr = new HtmlTableRow (); { tr.Cells.Add ( BuilderTableCell ( titleList , i ) ); tr.Cells.Add ( BuilderTableCellWithRadio ( i ) ); if ( i % 2 == 0 ) { tr.Style.Add ( "background-color" , "#ffc" ); } } tbTraDemand.Rows.Add ( tr ); } } } private HtmlTableCell BuilderTableCellWithRadio ( int i ) { HtmlTableCell tc = new HtmlTableCell (); { tc.ColSpan = 3; RadioButtonList rbl = new RadioButtonList (); { rbl.Items.Add ( new ListItem ( "" , "1" ) ); rbl.Items.Add ( new ListItem ( "" , "2" ) ); rbl.Items.Add ( new ListItem ( "" , "3" ) ); rbl.Style.Add ( "width" , "100%" ); rbl.RepeatDirection = RepeatDirection.Horizontal; } tc.Controls.Add ( rbl ); } return tc; } private HtmlTableCell BuilderTableCell ( NameValueCollection titleList , int i ) { HtmlTableCell tc = new HtmlTableCell (); { tc.Style.Add ( "width" , "40%" ); tc.Align = "left"; Label lbl = new Label (); lbl.Text = String.Concat ( " " , titleList.AllKeys[i] ); tc.Controls.Add ( lbl ); } return tc; } Config: AppSettings 1: 2: "MarketReSearch"> 3: "TravelReSearchTitle" type="System.Configuration.NameValueSectionHa
ndler"/> 8: "XXXX訂" value="1"/> 9: "XXXX訂" value="2"/> 19: 20:
全站熱搜
留言列表
