获取复选框值的数组

Jquery - get array of checkbox values

本文关键字：数组 复选框 获取      更新时间：2023-09-26

我有几个name="location[]"复选框，每个复选框都有不同的值value="3"或value="5"等。我想知道如何在jquery当这些框被选中，把值在一个数组称为location[] ?这是我的html:

<ul id="searchFilter">
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
<li class=""><input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>             
</ul>
这是我得到的jquery: 
var $checkboxes = $("input:checkbox");
var opts = [];
$checkboxes.each(function(){
     if(this.checked){
     opts.push(this.name);
}

这只返回location[]，并在我检查另一个项目时添加另一个location[]。

请帮助。

我也有其他的复选框价格[]，sqft[]…我希望保持复选框在同一地面，所以数组内1数组…

您可以使用:checked选择器和map()从一组匹配的元素创建一个数组。试试这个:

$(':checkbox').change(e => {
  let opts = $(":checkbox:checked").map((i, el) => el.value).get();
  console.log(opts);
});
/* alternative for IE support:
$(':checkbox').change(function() {
  var opts = $(":checkbox:checked").map(function() {
    return this.value;
  }).get();
  console.log(opts);
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="1">
    Toronto
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="3">
    New York
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="6">
    London
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="5">
    Paris
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="4">
    Berlin
  </li>
</ul>

我有多个复选框，location[], price[], sqft[] -我怎么能保持它们在单独的数组，但仍然在opts内?

要做到这一点，您需要使用closest(): 将map()限制为当前ul元素。

$(':checkbox').change(function() {
  let opts = $(this).closest('ul').find(":checkbox:checked").map((i, el) => el.value).get();
  console.log(opts);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="1">
    Toronto
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="3">
    New York
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="6">
    London
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="5">
    Paris
  </li>
  <li class="">
    <input type="checkbox" name="location[]" class="cb_location" value="4">
    Berlin
  </li>
</ul>
<ul id="searchFilter">
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="2">
    $200,000 to $299,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="3">
    $300,000 to $399,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="4">
    $400,000 to $499,999
  </li>
  <li>
    <input type="checkbox" name="price[]" class="cb_price" value="5">
    $500,000+
  </li>
</ul>

相关文章：