Jquery - 获取复选框值的数组

Question

我有一些复选框name="location[]" and checkbox有一个不同的值value="3"或value="5" @ @ @ @ value="5" @ @ @ @等我想知道在jQuery中检查这些框时如何将值放在一个名为@ 987654324的数组内@?这是我的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[]。

请帮忙。

我还有其他带有 price[]、sqft[] 的复选框...我希望将复选框保持在同一位置，因此 1 个数组中的数组...我希望这是有道理的。

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