代码之家 › 专栏 › 技术社区 › user3574603

为什么我的map()调用没有返回预期的结果?

jquery

user3574603 · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

Rory McCrossan Hsm Sharique Hasan 6 年前

问题是因为您使用的是 map() ,这是指数 ,而不是第二个参数,第二个参数是对元素本身的引用:

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前