CODEWITHSUNDEEP
javascriptjquerycss
Dinshaw Raje
Dinshaw Raje

Reputation: 963

fetch multiple checked values from ul li in jquery

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

Upvotes: 1

Views: 2035

Answers (3)

Harshal Patil
Harshal Patil

Reputation: 6759

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

Upvotes: 1

hungndv
hungndv

Reputation: 2141

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.

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

Upvotes: 4

Related Questions