Javascript 从多组复选框中解析 JSON 数组

Question

我需要创建一个由多组数组组成的数组，如下所示:

arr = {arr1:{index:value, index2:value2}, arr2:{index,value, index2:value2}};

我的问题是是否有可能自动完成？它按 HTML 中的复选框组排序(示例如下):

<div class='col-sm1 rights-col'>
<input type='checkbox' data-sec='posts' id='posts-rights'> <span>Příspěvky</span><br />
<input type='checkbox' data-sec='posts' data-action='add' id='posts-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='posts' data-action='edit' id='posts-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='posts' data-action='delete' id='posts-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='posts' data-action='renew' id='posts-renew'> <span>Obnovovat</span>
</div>

<div class='col-sm2 rights-col'>
<input type='checkbox' data-sec='menu' id='menu-rights'> <span>Menu</span><br />
<input type='checkbox' data-sec='menu' data-action='add' id='menu-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='menu' data-action='edit' id='menu-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='menu' data-action='delete' id='menu-delete'> <span>Mazat</span>
</div>

<div class='col-sm3 rights-col'>
<input type='checkbox' data-sec='users' id='users-rights'> <span>Uživatelé</span><br />
<input type='checkbox' data-sec='users' data-action='add' id='users-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='users' data-action='delete' id='users-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='users' data-action='prava' id='users-prava'> <span>Upravovat práva</span><br />
</div>

我正在尝试获取一个如下所示的数组:

arr = {posts:{add:0, edit: 1, delete:0, renew:0}, menu:{add:1, edit:0, delete:1}}; // etc....

谢谢!

Answer 1

这应该可以实现您所追求的目标。它将所有复选框简化为一个由 data-sec

关闭的对象

var divs = Array.from(document.querySelectorAll('.rights-col input'));
var dataStructure = divs.filter(function(el) {
  // don't include items that are missing data-sec attribute
  return el.getAttribute('data-sec');
}).reduce(function(acc, cur) {
  var bucket = cur.getAttribute('data-sec');
  var action = cur.getAttribute('data-action');
  
  if (!acc[bucket]) {
     acc[bucket] = {}; 
  }
  // set property
  acc[bucket][action] = Number(cur.checked);

  return acc;
}, {});

alert(JSON.stringify(dataStructure));

<div class='col-sm1 rights-col'>
<input type='checkbox' data-sec='posts' id='posts-rights'> <span>Příspěvky</span><br />
<input type='checkbox' data-sec='posts' data-action='add' id='posts-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='posts' data-action='edit' id='posts-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='posts' data-action='delete' id='posts-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='posts' data-action='renew' id='posts-renew'> <span>Obnovovat</span>
</div>

<div class='col-sm2 rights-col'>
<input type='checkbox' data-sec='menu' id='menu-rights'> <span>Menu</span><br />
<input type='checkbox' data-sec='menu' data-action='add' id='menu-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='menu' data-action='edit' id='menu-edit'> <span>Editovat</span><br />
<input type='checkbox' data-sec='menu' data-action='delete' id='menu-delete'> <span>Mazat</span>
</div>

<div class='col-sm3 rights-col'>
<input type='checkbox' data-sec='users' id='users-rights'> <span>Uživatelé</span><br />
<input type='checkbox' data-sec='users' data-action='add' id='users-add'> <span>Vytvářet</span><br />
<input type='checkbox' data-sec='users' data-action='delete' id='users-delete'> <span>Mazat</span><br />
<input type='checkbox' data-sec='users' data-action='prava' id='users-prava'> <span>Upravovat práva</span><br />
</div>