CODEWITHSUNDEEP
javascriptjquery
Eyal
Eyal

Reputation: 4763

Get checkbox value from a specific li

I have the following html structure. I can select the the <li> but cannot get the checkbox value - it's undefined

<ul>
    <li class="selected" style="false">
        <label class="">
            <input type="checkbox" data-name="selectItem" value="2447"> 
            <span>England</span>
        </label>
    </li>
</ul>

$('ul li.selected').each(function () {
    console.log('li.selected');
    var val = $(this).closest('label').find('[type=checkbox]').val();
    console.log(val);                                        
});

Upvotes: 3

Views: 1768

Answers (5)

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

You can directly .find() the input type="checkbox" within the $(this):

$('ul li.selected').each(function () {
  console.log('li.selected');
  var val = $(this).find(':checkbox').val();
  console.log(val);                                        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li class="selected" style="false">
        <label class="">
              <input type="checkbox" data-name="selectItem" value="2447"> 
              <span>England</span>
        </label>
    </li>
</ul>

Upvotes: 0

hityagi
hityagi

Reputation: 5256

Simply search for checkbox : val = $(this).find('input[type=checkbox]').val();

$('ul li.selected').each(function() {
  console.log("li.selected");
  var val = $(this).find('input[type=checkbox]').val();
  console.log(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="selected" style="false">
    <label class="">
      <input type="checkbox" data-name="selectItem" value="2447">
      <span>England</span>
    </label>
  </li>
</ul>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

closest() goes up the DOM, you should use find() as you want to go down instead. Also note that you can achieve what you require in a single call to find(). Try this:

$('ul li.selected').each(function () {
    var val = $(this).find('label :checkbox').val();
    console.log(val);                                        
});

Upvotes: 1

Roxoradev
Roxoradev

Reputation: 893

Try changing your code like this:

 $('li.selected').each(function () {
            console.log("li.selected");
            var val = $(this).find("label").find('input[type=checkbox]').val();
            console.log(val);                                        
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="selected" style="false">
    <label class="">
          <input type="checkbox" data-name="selectItem" value="2447"> 
          <span>England</span>
    </label>
</li>

Upvotes: 0

Esko
Esko

Reputation: 4207

Inside the each $(this) is the li-element, so try this:

 $('ul li.selected').each(function () {
            console.log("li.selected");
            var val = $(this).find(":checkbox").val();
            console.log(val);                                        
        });

Upvotes: 0

Related Questions