从jQuery中的ul li获取多个检查的值

Question

我已包含给定的代码

<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>

我想从列表中获取已检查的值，例如：如果已选择ipsum loreum并进行测试，那么我将如何通过jquery提取这些文本。 请帮帮我。 提前致谢

Answer 1

您可以在所有选中的元素上使用.map()函数，以从同级i元素返回文本数组：

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

工作演示

Answer 2

这个给你：

 $('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> 

希望这可以帮助。

Answer 3

您将使用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();"> 

有关更多详细信息，请检查jQuery Map API