views:

1357

answers:

5

I have this CheckBoxList on a page:

<asp:checkboxlist runat="server" id="Locations" datasourceid="LocationsDatasource"
   datatextfield="CountryName" datavaluefield="CountryCode" />

I'd like to loop through the checkbox elements on the client using Javascript and grab the value of each checked checkbox, but the values don't appear to be available on the client side. The HTML output looks like this:

<table id="ctl00_Content_Locations" class="SearchFilterCheckboxlist" cellspacing="0" cellpadding="0" border="0" style="width:235px;border-collapse:collapse;">
<tr>
 <td><input id="ctl00_Content_Locations_0" type="checkbox" name="ctl00$Content$Locations$0" /><label for="ctl00_Content_Locations_0">Democratic Republic of the Congo</label></td>
</tr><tr>
 <td><input id="ctl00_Content_Locations_1" type="checkbox" name="ctl00$Content$Locations$1" /><label for="ctl00_Content_Locations_1">Central African Republic</label></td>
</tr><tr>
 <td><input id="ctl00_Content_Locations_2" type="checkbox" name="ctl00$Content$Locations$2" /><label for="ctl00_Content_Locations_2">Congo</label></td>
</tr><tr>
 <td><input id="ctl00_Content_Locations_3" type="checkbox" name="ctl00$Content$Locations$3" /><label for="ctl00_Content_Locations_3">Cameroon</label></td>
</tr><tr>
 <td><input id="ctl00_Content_Locations_4" type="checkbox" name="ctl00$Content$Locations$4" /><label for="ctl00_Content_Locations_4">Gabon</label></td>
</tr><tr>
 <td><input id="ctl00_Content_Locations_5" type="checkbox" name="ctl00$Content$Locations$5" /><label for="ctl00_Content_Locations_5">Equatorial Guinea</label></td>
</tr>

The values ("cd", "cg", "ga", etc.) are nowhere to be found. Where are they? Is it even possible to access them on the client, or do I need to build this checkboxlist myself using a repeater or something?

+1  A: 

Stored in ViewState, you cannot access them on the client without some hacking.

Jason Bunting
Thanks. I guess I'll just need to build the checkboxlist with a repeater.
Herb Caudill
A: 

I've searched for this before and you may be close to little luck. I think i remember seeing that there isn't a checkbox list item for javascript, so it doesn't understand it. You'll have to search for items on the page that have the type of a check box and test to see what group (i think that's the property) that it belongs too.

I'll search my code and see if I can find what I did...


Of course, I can't find what I did.

Why are you doing it client side in javascript? Why don't you do some AJAX and control everything server side?

Miles
FYI: Java and JavaScript are not the same, they are complete different languages.
Jason Bunting
A: 

To avoid hacking the checkbox list just use a repeater as such:

<asp:Repeater ID="rptItems" runat="server" DataSourceID="odsDataSource">
<ItemTemplate>
<input id="iptCheckBox" type="checkbox" runat="server" value='<%# Eval("Key") %>'><%# Eval("Value") %></input>
</ItemTemplate>
</asp:Repeater>
rjarmstrong
A: 

Try this to get datavalue in clientside..

<body>
     <form id="form1" runat="server">
          <div>
               <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataTextField="tx" DataValueField="vl">
               </asp:CheckBoxList>
          </div>
          <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /> 
     </form>
</body>
<script type="text/javascript">

function Button1_onclick() 
{
var itemarr = document.getElementById("CheckBoxList1").getElementsByTagName("span");
var itemlen = itemarr.length;
     for(i = 0; i <itemlen;i++)
     {
          alert(itemarr[i].getAttribute("dvalue"));
     }
return false;
}


</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("tx");
        dt.Columns.Add("vl");
        DataRow dr = dt.NewRow();
        dr[0] = "asdas";
        dr[1] = "1";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "456456";
        dr[1] = "2";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "yjryut";
        dr[1] = "3";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "yjrfdgdfgyut";
        dr[1] = "3";
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[0] = "34534";
        dr[1] = "3";
        dt.Rows.Add(dr);
        CheckBoxList1.DataSource = dt;
        CheckBoxList1.DataBind();
        foreach (ListItem li in CheckBoxList1.Items)
        {
            li.Attributes.Add("dvalue", li.Value);
        }
    }
}

}

Swapna
A: 

Swapna, Your answer absolutely works. So in order to check if the check box in the ASP.Net Checkboxlist is checked and then accumulate the list as a comma-delimited string, you can do as

C# Code-behind

ChkboxList1.DataSource = dsData;
ChkboxList1.DataTextField = "your-display-column-name";
ChkboxList1.DataValueField = "your-identifier-column-name";
ChkboxList1.DataBind();

foreach (ListItem li in ChkboxList1.Items)
{
    li.Attributes.Add("DataValue", li.Value); 
}

Then in Javascript do

var selValues = "";

var ChkboxList1Ctl = document.getElementById("ChkboxList1");

var ChkboxList1Arr = null;

var ChkboxList1Attr= null;

if (ChkboxList1Ctl != null)

{

 ChkboxList1Arr = ChkboxList1Ctl.getElementsByTagName("INPUT");

 ChkboxList1Attr = ChkboxList1Ctl.getElementByTagName("span");

}

if (ChkboxList1Arr != null)

{

  for (var i = 0; i < ChkboxList1Arr.length; i++)

  {

     if (ChkboxList1Arr[i].checked)

         selValues += ChkboxList1Attr[i].getAttribute("DataValue") + ",";

  }

  if (selValues.length > 0)

     selValues = selValues.substr(0, selValues.length - 1);

}

-- LotusShiv