解決無法用Javascript取得CheckBoxList Value的問題

解決無法用Javascript取得CheckBoxList Value的問題

先放置一個測試用CheckBoxList

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="小明" Value="A"></asp:ListItem>
<asp:ListItem Text="小華" Value="B"></asp:ListItem>
<asp:ListItem Text="小張" Value="C"></asp:ListItem>
<asp:ListItem Text="小菜" Value="D"></asp:ListItem>
</asp:CheckBoxList>
執行後,觀看程式碼

<table id="CheckBoxList1" border="0">
<tr>
<td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">小明</label></td>
</tr><tr>
<td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">小華</label></td>
</tr><tr>
<td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">小張</label></td>
</tr><tr>
<td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" /><label for="CheckBoxList1_3">小菜</label></td>
</tr>
</table>
由上面的結果我們可以看到,input 裡並沒有Value的值可以讓JavaScript抓取,所以現在我們要幫他加一個attribute


protected void Page_Load(object sender, EventArgs e)




...{


foreach (ListItem li in CheckBoxList1.Items)


li.Attributes["MainValue"] = li.Value;




}
在觀看一次程式碼

<table id="CheckBoxList1" border="0">
<tr>
<td><span MainValue="A"><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">小明</label></span></td>
</tr><tr>
<td><span MainValue="B"><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">小華</label></span></td>
</tr><tr>
<td><span MainValue="C"><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">小張</label></span></td>
</tr><tr>
<td><span MainValue="D"><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" /><label for="CheckBoxList1_3">小菜</label></span></td>
</tr>
</table>
我們可以發現,input被Span包住了,而且裡面多了一個我們剛剛設定的MainValue Attribute,現在我們就可以引用Jquery來取值了


$("#CheckBoxList1 input:checkbox").each(function(){




$(this).parent('span').attr('MainValue');




});