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

的对象

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用jQuery，你要找的很简单：检查注释以了解代码。

另外，请注意我使用按钮执行检查，因此您可以在运行前设置配置，但这仅用于演示。

＆＃13;

function check() {
    var result = {};
    // Iterate all checkboxes:  
    $("input:checkbox").each(function(i, elem) {
        elem = $(elem);
        var sec = elem.attr("data-sec");
        var action = elem.attr("data-action");
        // For the ones that have an action set:
        if (action) {
            // Initialise section if needed:
            if (!result[sec]) {
                result[sec] = {};
            }
            // Set value (+will convert Boolean to Number):
            result[sec][action] = +elem.prop("checked");
        }
    });
    // Show result:
    alert(JSON.stringify(result));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="check()">Check</button>
<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>

＆＃13;

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

2 个答案: