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

我想从list中获取选中的值，例如:如果我选择了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地图获得它。

​

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地图API