fetch multiple checked values from ul li in jquery

Question

I have included given code

<ul class="checkboxes">
  <li class=" ">
    <label title="" for="option-0">
      <input type="checkbox" aria-selected="true" title="" value="All" name="country" id="option-0"><i>All</i>
    </label>
  </li>
  <li class=" ">
    <label title="" for="option-1">
      <input type="checkbox" title="" value="1" name="country" id="option-1" aria-selected="true"><i>test</i>
    </label>
  </li>
  <li class=" ">
    <label  title="" for="option-2">
      <input type="checkbox" title="" value="2" name="country" id="option-2" aria-selected="true"><i>abcd</i>
    </label>
  </li>
  <li class=" ">
    <label  title="" for="option-3">
      <input type="checkbox" title="" value="3" name="country" id="option-3" aria-selected="true"><i>loreum</i>
    </label>
  </li>
  <li class=" ">
    <label  title="" for="option-4">
      <input type="checkbox" title="" value="4" name="country" id="option-4" aria-selected="true"><i>ipsum</i>
    </label>
  </li>
</ul>

I want to fetch checked values from list for eg: If have I have selected ipsum loreum and test then how i will fetch these texts through jquery. Please help me out. Thanks in advance

Answer 1

You can use .map() function on all checked elements to return array of text from sibling i element:

$('ul input:checked').map(function(){
   return $(this).next('i').text();
}).get();

Working Demo

Answer 2

Here you are:

 $('input').change(function() { var str = ''; console.log($('input:checked').length); $.each($('input:checked'), function(index, value) { str += $(value).next('i').text() + ' ,'; }); alert('You checked: ' + str); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="checkboxes"> <li class=" "> <label title="" for="option-0"> <input type="checkbox" aria-selected="true" title="" value="All" name="country" id="option-0"><i>All</i> </label> </li> <li class=" "> <label title="" for="option-1"> <input type="checkbox" title="" value="1" name="country" id="option-1" aria-selected="true"><i>test</i> </label> </li> <li class=" "> <label title="" for="option-2"> <input type="checkbox" title="" value="2" name="country" id="option-2" aria-selected="true"><i>abcd</i> </label> </li> <li class=" "> <label title="" for="option-3"> <input type="checkbox" title="" value="3" name="country" id="option-3" aria-selected="true"><i>loreum</i> </label> </li> <li class=" "> <label title="" for="option-4"> <input type="checkbox" title="" value="4" name="country" id="option-4" aria-selected="true"><i>ipsum</i> </label> </li> </ul> 

Hope this helps.

Answer 3

You will get it using jQuery Map

 getValues = function(){ var values = $('input[name=country]:checked').map(function(){ return $(this).val(); }).get(); alert(values); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="checkboxes"> <li class=" "> <label title="" for="option-0"> <input type="checkbox" aria-selected="true" title="" value="All" name="country" id="option-0"><i>All</i> </label> </li> <li class=" "> <label title="" for="option-1"> <input type="checkbox" title="" value="1" name="country" id="option-1" aria-selected="true"><i>test</i> </label> </li> <li class=" "> <label title="" for="option-2"> <input type="checkbox" title="" value="2" name="country" id="option-2" aria-selected="true"><i>abcd</i> </label> </li> <li class=" "> <label title="" for="option-3"> <input type="checkbox" title="" value="3" name="country" id="option-3" aria-selected="true"><i>loreum</i> </label> </li> <li class=" "> <label title="" for="option-4"> <input type="checkbox" title="" value="4" name="country" id="option-4" aria-selected="true"><i>ipsum</i> </label> </li> </ul> <input type="button" value="Get Values" onclick="getValues();"> 

For more details check jQuery Map API