Javascript如何获取CheckBoxList控件列表项的值？

Javascript如何获取CheckBoxList控件列表项的值呢？CheckboxList是服务器控件，绑定数据容易，但是生成的静态页面居然没有ListItem的Value值，所以默认情况下在页面中是取不到ListItem的值的。

原始生成页面代码：

<table id="ctl00_mainContent_FriendsList" border="0">
 <tr>
  <td><input id="ctl00_mainContent_FriendsList_0" type="checkbox" name="ctl00$mainContent$FriendsList$0" /><label for="ctl00_mainContent_FriendsList_0">jarome</label></td><td><input id="ctl00_mainContent_FriendsList_1" type="checkbox" name="ctl00$mainContent$FriendsList$1" /><label for="ctl00_mainContent_FriendsList_1">admin1</label></td><td></td>
 </tr>
</table>
这里面只有Label里面的Text值，显然取不到Value值。

想点办法，自己加个值进来，在数据绑定之后加上下面代码：
      foreach (ListItem li in FriendsList.Items)
            {
                li.Attributes.Add("alt", li.Value);
            }
就是给ListItem加个alt属性，赋予Value值，相当于：

 <asp:CheckBoxList ID="FriendsList" runat="server">
            <asp:ListItem Value="jarome" alt="jarome">jarome</asp:ListItem>
            <asp:ListItem Value="admin" alt="admin">admin1</asp:ListItem>
</asp:CheckBoxList>

页面生成代码：

<table id="ctl00_mainContent_FriendsList" border="0">
 <tr>
  <td><span alt="jarome"><input id="ctl00_mainContent_FriendsList_0" type="checkbox" name="ctl00$mainContent$FriendsList$0" /><label for="ctl00_mainContent_FriendsList_0">jarome</label></span></td><td><span alt="admin"><input id="ctl00_mainContent_FriendsList_1" type="checkbox" name="ctl00$mainContent$FriendsList$1" /><label for="ctl00_mainContent_FriendsList_1">admin1</label></span></td><td></td>
 </tr>
</table>

看到多了个<span/>，alt中就是我们想要取得的值。

 //获取CheckBoxList值，使用jQuery类库
 function GetCheckBoxListValue(obj) { //obj为CheckBoxList的ClientID
     var v = new Array();
     $("#" + obj+ " input").each(function() {
         if (this.checked) {
             v.push($(this).parent().attr("alt"));
         }
     });
     return v; //返回一列以','分隔的结果
 }

 

 

先放置一個測試用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來取值了

 

 主要思路就是为ListItem加一个"checkValue"属性，前台通过javascript找到。

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " CheckBoxListValue.aspx.cs "  Inherits = " test_CheckBoxListValue "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Javascript得到CheckBoxList的Value </ title >
     < script  type ="text/javascript"  src ="../js/jquery-1.3.2.min.js" ></ script >
     < script  type ="text/javascript" >
         // 把选中的值写入hiddenfield
         function  f(){
             var  total  =  $( " #chkBox input[@type=checkbox]:checked " ).size();
             var  checkValues  =   '' ;
            $( " #chkBox input[@type=checkbox]:checked " ).each( function (){
                checkValues  +=  $( this ).parent().attr( " checkValue " )  +   " , " ;
            });
            alert( " 选中了 "   +  total  +   " 个 "   +   " \n "   +   " 值： "   +  checkValues.substring( 0 ,checkValues.length - 1 ));
        }
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
        主要思路就是为ListItem加一个"checkValue"属性，前台通过javascript找到。
     </ div >
     < div >
         < input  type ="button"  onclick ="f();"  value ="取值"   />
         < asp:CheckBoxList  ID ="chkBox"  runat ="server" >
         </ asp:CheckBoxList >
     </ div >
     </ form >
</ body >
</ html >

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  test_CheckBoxListValue : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! IsPostBack)
            Bind();
    }
     private   void  Bind()
    {
        ListItem li1  =   new  ListItem( " 1 " ,  " 1 " );
        li1.Attributes.Add( " checkValue " ,  " 1 " );
        chkBox.Items.Add(li1);

        ListItem li2  =   new  ListItem( " 2 " ,  " 2 " );
        li2.Attributes.Add( " checkValue " ,  " 2 " );
        chkBox.Items.Add(li2);
    }
}

 

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

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

});

 

转载于:https://www.cnblogs.com/yibinboy/archive/2010/04/23/1718940.html