Get ListItem Values using JQuery

Question

I'm trying to use JQuery to get the values of the ListItems in an unordered list (see below). The code below is close to working, but it always returns the value of the first ListItem, even if the second one is checked.

Thanks, Russ.

    $(document).ready(function() {
        $("li").click(function() {

            $("input:checked").each(function() {

                alert($("label").attr('InnerText'));

            });
        });
    });

<div> 


 <ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
  <li class="AspNet-CheckBoxList-Item">
      <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="first1" />
      <label for="CheckBoxList1_0">First $30.00</label>
  </li>
  <li class="AspNet-CheckBoxList-Item">
      <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" />
      <label for="CheckBoxList1_1">Second $25.00</label>
  </li>
 </ul>


</div>

Answer 1

In your each call back you're not limiting the scope of the selector and it's just grabbing the first label it finds when you're calling .attr. Try something like the following...

$("input:checked").each(function() {
    $(this).next("label").text(); //Or
    $(this).parent().find("label").text(); //Depending on your markup
});

This scopes selector to the elements around the checkbox rather than the whole document