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