Question

我有一个带有三个复选框的表单：

<form id="checklist-form" action="">
  <h1>this</h1>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item0" required="">
    <label class="form-check-label" for="check-item0">
     One
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item1" required="">
    <label class="form-check-label" for="check-item1">
      Two
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item2" required="">
    <label class="form-check-label" for="check-item2">
      Three
    </label>
  </div>
</form>

我想获取每个复选框的值，以便将它们存储在cookie中。

在我的页面上，第一个复选框被选中。其他两个未选中。我可以使用jQuery来检查第一个框是否被选中：

$('#checklist-form input[type="checkbox"]').first().is(':checked')
// > true

同样，我可以看到第二个元素未选中：

$($('#checklist-form input[type="checkbox"]')[1]).is(':checked')
// > false

我想使用map返回一个数组，而不是依次查询每个复选框。但是，我运气不好：

$('#checklist-form input[type="checkbox"]').map(function(el){ return $(el).is(':checked') }).toArray()
// > (3) [false, false, false]

我希望有[true, false, false]。那我在做什么错？如果我想将表单的状态存储到cookie中，将复选框状态转换为数组是完全正确的方法吗？

Answer 1

问题是因为您使用的是map()的第一个参数，它是集合中元素的 index ，而不是第二个参数，即对元素本身：

var arr = $('#checklist-form input[type="checkbox"]').map(function(i, el) {
  return $(el).is(':checked');
}).toArray();
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="checklist-form" action="">
  <h1>this</h1>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item0" required="" checked="true">
    <label class="form-check-label" for="check-item0">
     One
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item1" required="">
    <label class="form-check-label" for="check-item1">
      Two
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check-item2" required="">
    <label class="form-check-label" for="check-item2">
      Three
    </label>
  </div>
</form>

还请注意，您可以直接从元素中获取checked属性，并使用get()而不是toArray()来稍微提高逻辑性能：

var arr = $('#checklist-form input[type="checkbox"]').map(function(i, el) {
  return el.checked;
}).get();

或者，就像@charlietfl指出的那样，您可以消除对传递给处理程序函数的参数的依赖，并在处理程序函数内使用this关键字，因为它在提供的元素范围内被调用：

var arr = $('#checklist-form input[type="checkbox"]').map(function() {
  return this.checked;
}).get();

为什么我的map（）调用未返回预期结果？

1 个答案: