從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