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();

<强> Working Demo

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

获取它

＆＃13;

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

＆＃13;

<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();">

＆＃13;

有关详细信息，请查看 jQuery Map API

从jquery中的ul li获取多个选中的值

3 个答案: