[RESOLVED] checkboxlist value

[met0555]

Hi,

I'm trying to get the .value as well as the .text value of each item in the checboxlist.

The problem i'm having is, i'm only able to get the checboxlist.item[i].text data but not the checboxlist.item[i].value data.

I tried the following code but both gives back the .text data.

$(document).ready(function () {

                                  $('.checkbox label').each(function () {
                                  
                                   
                                    alert($(this).parent().children("label").text());
                                    alert($(this).parent().children("label").html());

                                                                        
                                  });
                              });

This what my checkbox list looks like

    <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkbox">
        <asp:ListItem Value="ABC">hi1</asp:ListItem>
        <asp:ListItem Value="CDE">hi2</asp:ListItem>
        <asp:ListItem Value="ACE">hi3</asp:ListItem>
        <asp:ListItem Value="ABD">hi4</asp:ListItem>
    </asp:CheckBoxList>

Thanks

[kfcSmitty]

Right now you're alerting the parent labels text and HTML.. That is what you've told it to do.

A couple issues with that:

#1. You've already got the label in your .each (and thus the $this object), so you should not call $(this).parent().children("label") as that is a redundant lookup, you already have that object.
#2. The second line is still grabbing your label, not your checkbox, so it cannot get the value.

Change your alerts to what I have and it should work:

alert($(this).text());
alert($(this).parent().find('[type=checkbox]').val());

[met0555]

Hi,

Thx for ur suggestion, i found a code online which is woking fine so far. But I realized by using jquery my function response is impacted.

protected override void Render(HtmlTextWriter writer)
        {
            foreach (ListItem item in chk.Items)
            {
                item.Attributes.Add("item-value", item.Value);
               
            }
            base.Render(writer);
        }

 $(document).ready(function () {
            $('.checkbox label').each(function () {
                if ($(this).text() == 'sample1') {
                    var value = $(this).parent().attr('item-value');
                    var text = $(this).parent().find('label').text();
               }
            });
        }); 

I was wondering if it's possible to achieve the same thing using Javascript? I was trying the following code but i always keep getting 'null'

var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var label = CHK.getElementsByTagName("label");

for (var ii = 0; ii < checkbox.length; ii++) {
                        
   alert(label[ii].getAttribute('item-value'));
} 

thanks

[kfcSmitty]

Thx for ur suggestion, i found a code online which is woking fine so far. But I realized by using jquery my function response is impacted.

Could you explain this statement? jQuery is pretty fast for most things, and for something like this I would think the performance hit, if any, would be minimal.

Also note, performance would be better if you weren't doing this

var text = $(this).parent().find('label').text();

That code is getting the label, then going to the parent TD, then searching for the TD for the label it already has and alerting the text.

I would think that the code you posted would be much slower. You're looping through every input element on the page, rather than just the checkboxes. It would be easier to troubleshoot if you posted the code that is rendered, rather than your C# code that is writing the elements.

[met0555]

Hi,

I don't know much about javascript just started using it few days ago, just to improve my application speed.

First i did the same thing with asp.net update panel, but I wasnt happy with the response speed of the update panel ~1 - 0.5s delay after a button clicked. I then quickly tried to do the same thing with javascript which was much faster. I have around 100 buttons on my page, and my code use multiple loops.
However with the javascript I wasn't able to get the 'item-value' value so I used jquery for this area of my code (what i posted earlier). And I noticed the response time is much slower than the javascript one.

var text = $(this).parent().find('label').text();

How can I improve this line of code so not to do unnecessary steps?

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkbox">
        <asp:ListItem Value="ABC">hi1</asp:ListItem>
        <asp:ListItem Value="CDE">hi2</asp:ListItem>
        <asp:ListItem Value="ACE">hi3</asp:ListItem>
        <asp:ListItem Value="ABD">hi4</asp:ListItem>
    </asp:CheckBoxList>

Thanks

[kfcSmitty]

How can I improve this line of code so not to do unnecessary steps?

If you check post #2, it shows how to fix it. I don't think you'll see much of a slowdown using jQuery for the functionality you're looking for.

[met0555]

After a little more digging i found out the jqury was not the cause of the speed problem. it was due some some other buttons posback to server issue...

Thx for the help