JavaScript 创建多级对象

Question

我想创建一个像这样的对象:

var exampleObject = {
    '1' : ['2','3','7'],
    '2' : ['4','7'],
    '4' : ['5','1','2']
  };

来自输入字段列表:

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

这个想法是，对于具有相同“名称”属性的每个输入，我希望获得输入中“值”字段的值。我尝试过不同的方法但没有成功。关于如何实现这一目标有什么建议吗？

Answer 1

• 使用document.querySelectorAll选择所有'.flat-red'元素
• 使用[].forEach.call迭代元素

var elems = document.querySelectorAll('.flat-red');
var obj = {};
[].forEach.call(elems, function(el) {
  if (!obj[el.name]) {
    obj[el.name] = [el.value];
  } else {
    obj[el.name].push(el.value);
  }
});
console.log(obj);

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

使用Array#reduce

var elems = document.querySelectorAll('.flat-red');
var a = [].reduce.call(elems, function(a, b) {
  return !a[b.name] && (a[b.name] = []), a[b.name].push(b.value), a;
}, {});
console.log(JSON.stringify(a, null, 4));

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

如果根据已检查状态获取对象

var allElems = document.querySelectorAll('.flat-red');
[].forEach.call(allElems, function(el) {
  el.addEventListener('change', function() {
    var elems = document.querySelectorAll('.flat-red:checked');
    var a = [].reduce.call(elems, function(a, b) {
      return !a[b.name] && (a[b.name] = []), a[b.name].push(b.value), a;
    }, {});
    console.log(JSON.stringify(a, null, 4));
  });
});

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">