jQuery - find control using custom attribute

Question

I am using CheckBoxList control of Asp.Net. In order to get selected checkboxes i am adding a custom attribute for Value after binding the data to the checkboxlist.

I am able to get the checked checkboxes in jQuery but i dont know how to find a particular checkbox using that custom attribute in the checkboxlist.

here is the code:

After databind in .cs file:

    foreach (ListItem li in cblRequestTypes.Items)
        li.Attributes.Add("itemValue", li.Value);

To get the selected checboxes:

$(":checkbox").each(function() {
              if (this.checked) {

                selectedChecks += $(this).parent().attr("itemValue") + "~";

              }
            });

Now i am passing the values in the querystring and based on that i have to find the checkbox which has the itemValue attribute sent in the querystring. This part is not working or may be i am missing something here.

var id = $.QueryString["id"]
$(id.split("~")).each(function (i, item) {
                $("checkbox[itemValue=" + item +"]").attr('check',checked');

            });

This is how the HTML for CheckBoxList is rendered:

<span itemValue="3"><input id="chkBoxList_0" type="checkbox" name="chkBoxList$0" /><label for="chkBoxList_0">Text 1</label></span>
<span itemValue="5"><input id="chkBoxList_1" type="checkbox" name="chkBoxList$1" /><label for="chkBoxList_1">Text 2</label></span>
<span itemValue="6"><input id="chkBoxList_2" type="checkbox" name="chkBoxList$2" /><label for="chkBoxList_2">Text 3</label></span>
<span itemValue="7"><input id="chkBoxList_3" type="checkbox" name="chkBoxList$3" /><label for="chkBoxList_3">Text 4</label></span>
<span itemValue="8"><input id="chkBoxList_4" type="checkbox" name="chkBoxList$4" /><label for="chkBoxList_4">Text 5</label></span>
<span itemValue="9"><input id="chkBoxList_5" type="checkbox" name="chkBoxList$5" /><label for="chkBoxList_5">Text 6</label></span>

I'll answer this on the condition you never do weird stuff with `~` ever again. I've already cleaned up one ASP project that had that in it. — Incognito, Feb 21 '12 at 23:30
Why not use the `value` attribute that any input element already has? Or put the `itemValue` on the checkbox itself? Or, if you're using HTML5, use a `data-item-value` attribute - then your markup is still valid — Flambino, Feb 21 '12 at 23:38
@Incognito : whats wrong with ~? Its just a separator. I can use comma as well but the text i have may contain comma so i chose ~. — Asdfg, Feb 22 '12 at 00:30
What if I use a ~? What happens when I add/remove checkboxes? — Incognito, Feb 22 '12 at 00:47
@Incognito : i get your point. I better pass array in the showmodaldialog instead of querystring value. — Asdfg, Feb 22 '12 at 04:20

Flambino · Accepted Answer · 2012-02-21T23:49:46.490

2

$("span[itemValue=8] input")

That'll get you the checkbox in the span where itemValue (in this example) is 8.

As I said in my comment, it's a little confusing that you're placing your value attribute on the span elements, and it seems to be confusing you too, since your selector is $("checkbox[itemValue=" + item +"]") - which doesn't make much sense.

Your selector will look for a checkbox element - which doesn't exist; the element you're looking for is input (with the type "checkbox").
And it'll try to find one that has the dataValue attribute - which none of the checkboxes do, since that attribute is on the span.

edited Feb 21 '12 at 23:49

answered Feb 21 '12 at 23:35

Flambino

18,507
2
39
58

Thanks for pointing out my mistake. The reason it generates span element is because it is a checkboxlist control. I am not sure what other control i can use here. – Asdfg Feb 22 '12 at 15:14
@Asdfg Did it otherwise answer your question? Just asking, since it's still open. Don't know how to set the value on the checkboxes themselves, though; I'm not an asp.net guy – Flambino Feb 22 '12 at 17:44

score 1 · Answer 2 · answered Feb 21 '12 at 23:39

1

Someone else already answered this, but when i tried to upvote the answer it appeared to have been deleted.

Try:

$('span[itemValue=8] input')

(where 8 is the id you want to look for; happened to pick 8 for this example)

answered Feb 21 '12 at 23:39

Giscard Biamby

4,569
1
22
24

Yeah, sorry about the deleted answer. I posted my answer, re-read the question, got confused, deleted the answer... and now I've re-posted my answer with modifications :-P – Flambino Feb 21 '12 at 23:45

jQuery - find control using custom attribute

2 Answers2

Linked