在jQuery map（）函数的回调中返回一个数组

Question

我有一个复选框表单控件，可以为每个复选框返回多个值。我需要角色jQuery map()函数来返回值的数组，即[['administrator,manager'], [administrator,conatct]]。

这个问题得到了解答，但对我的实施不起作用：Using map function to get lists' data attributes into an array in jQuery。

let roles = $('input.rolesHidden:checked').map(function() {
  return this.value;
}).get().join();

console.log(roles);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="groups" class="form-check-input remove-user-form" value="nis.test.dev.webadd" type="checkbox"> nis.test.dev.webadd</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="roles" class="rolesHidden" id="test.dev.webadd" value="administrator,manager" type="checkbox" checked='checked'> administrator,manager</p>
    </div>
  </div>
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="groups" class="form-check-input remove-user-form" value="test.dev.webadd2" type="checkbox"> test.dev.webadd2</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="roles" class="rolesHidden" id="test.dev.webadd2" value="contact,manager" type="checkbox" checked='checked'> contact,manager</p>
    </div>
  </div>

output>> administrator,manager,contact,manager

我试过包装[this.value]和像这样的[[this.value]]，但它只返回一个值的数组。

Answer 1

Use [[this.value]]并删除.join。

$(function() {
  let roles = $('input.rolesHidden:checked').map(function() {
    return [[this.value]];
  }).get();

  console.log(roles);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="groups" class="form-check-input remove-user-form" value="nis.test.dev.webadd" type="checkbox"> nis.test.dev.webadd</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd"></label><input name="roles" class="rolesHidden" id="test.dev.webadd" value="administrator,manager" type="checkbox" checked> administrator,manager</p>
    </div>
  </div>
  <div class="form-check remove-user">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="groups" class="form-check-input remove-user-form" value="test.dev.webadd2" type="checkbox"> test.dev.webadd2</p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12 text-left">
      <p><label class="form-check-label" for="test.dev.webadd2"></label><input name="roles" class="rolesHidden" id="test.dev.webadd2" value="contact,manager" type="checkbox" checked> contact,manager</p>
    </div>
  </div>