的JavaScript复选框

Question

我需要多组阵列的一个阵列，像这样的多组解析JSON阵列：

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>

Answer 2

使用jQuery的对象，你正在寻找的是很简单的： 检查的意见，以了解该代码。

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

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

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