Question

I am looking for a little help building out the correct selector in jQuery. My application uses ASP.NET so I have to deal with client ID’s that are rendered dynamically. Therefore I need to select elements based on assigned class name. The problem with this is that I am using the ASP.NET Checkbox control which wraps a <span> tag the Checkbox control. I currently am able to select the Checkbox I want using input:first-child…

Here is the rendered Checkbox

<span class="CheckboxClassName">
  <input id="xxxxx" type="checkbox" name="xxxxx" checked="checked" />
</span>

Here is the jQuery selector

$(".CheckboxClassName input:first-child")

This selection works by selecting the first child element of the element, which is the Checkbox I want. The problem is I want to modify the selector to select only those Checkboxes that are “Checked”. I was trying to use this …

$(".CheckboxClassName input:first-child:checked")

but it is not working.

Any suggestion on what I am doing wrong and how to select ASP.NET Checkboxes that are selected?

Answer 1

try

$("span.CheckboxClassName input:checked");

I don’t think that you need the :first selector really, unless there is a chance that you have more than one input as a descendent of a span with the CSS class CheckboxClassName.

Here’s an example that you can play with.