dyco

=桶言桶語=

2009-04-20

解決無法用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');

});