JQuery将复选框组作为数组[关闭]答案

【问题标题】：JQuery get checkboxes groups as arrays [closed]JQuery将复选框组作为数组[关闭]
【发布时间】：2015-06-01 10:28:35
【问题描述】：

问题来了：

我使用 jquery 2.x，我需要在事件（点击）上检索数据作为数组。

我有几个复选框，这些复选框代表某些用户的一些权限。

这是它的样子：

<label class="checkbox-inline">
    <input class="permission" checked="" value="1" data-id="4" data-type="view" type="checkbox">View</label>
<label class="checkbox-inline">
    <input class="permission" value="1" data-id="4" data-type="edit" type="checkbox">Edit</label>
<label class="checkbox-inline">
    <input class="permission" value="1" data-id="4" data-type="delete" type="checkbox">Delete</label>
<label class="checkbox-inline">
    <input class="permission" checked="" value="1" data-id="3" data-type="view" type="checkbox">View</label>
<label class="checkbox-inline">
    <input class="permission" checked="" value="1" data-id="3" data-type="edit" type="checkbox">Edit</label>
<label class="checkbox-inline">
    <input class="permission" value="1" data-id="3" data-type="delete" type="checkbox">Delete</label>

Data-id 属性代表我正在为其编辑权限的用户 ID。

数据类型属性代表我正在编辑的权限类型。

所以，我想以数组形式检索的内容（稍后将在 php 中处理）应该如下所示：

{
    {//Permissions for user id 3
        "id":3,
        "view":true,
        "edit":true,
        "delete":false
    },
    {//permissions for user id 4
        "id":4,
        "view":true,
        "edit":false,
        "edit":false
    }
}
//And more if there are more users/checkboxes on the page.

感谢阅读/帮助

【问题讨论】：

开始使用像 $(".permission") 这样的数组，但很难订购它们......我对选择器有点困惑......
@Julo0sS 关于"view":true, "edit":true, "delete":false 的"id":3, 的标准是什么
最简单的方法是使用 id 作为键的对象而不是数组

标签： javascript php jquery arrays checkbox

【解决方案1】：

使用“如果不存在则插入”模式。下面的代码更好地解释了这一点：

// caching some the elements of intrest
var $checkboxes = $('.permission');
var $testBtn = $('#testBtn');
var $output = $('#output');

function getUserPermissions(userId, permissionTable){
  var returnVal = null;
  for (var i = 0; i<permissionTable.length; i++){
    var userPermissions = permissionTable[i];
    if (userId === userPermissions.id){
       returnVal = userPermissions;
      break;
    }
  }
  return returnVal;
  
}

function snap(){
  var permissionTable = [];
  $checkboxes.each(function(idx, el){
    var $el = $(el); // wrap the element in jQuery
    var userId =  $el.data('id');
    var permissionType = $el.data('type');
    var permissionValue = $el.is(':checked');
    var userPermissions = getUserPermissions(userId, permissionTable);
    if (!userPermissions){
      userPermissions = {id: userId};
      permissionTable.push(userPermissions);
    }
    
    userPermissions[permissionType] = permissionValue;
    
  });
  return permissionTable;
};
    
// test button on click listener 
$testBtn.on('click', function(ev){
    
    var result = snap();
    var resultStr = JSON.stringify(result);
    $output.text(resultStr);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label class="checkbox-inline"><input class="permission" checked="" value="1" data-id="4" data-type="view" type="checkbox">View</label>
<label class="checkbox-inline"><input class="permission" value="1" data-id="4" data-type="edit" type="checkbox">Edit</label>
<label class="checkbox-inline"><input class="permission" value="1" data-id="4" data-type="delete" type="checkbox">Delete</label>
<label class="checkbox-inline"><input class="permission" checked="" value="1" data-id="3" data-type="view" type="checkbox">View</label>
<label class="checkbox-inline"><input class="permission" checked="" value="1" data-id="3" data-type="edit" type="checkbox">Edit</label>
<label class="checkbox-inline"><input class="permission" value="1" data-id="3" data-type="delete" type="checkbox">Delete</label>
<hr>
<button id="testBtn">Test</button>
<h3>Output:</h3>
<pre id="output"></pre>
</body>
</html>

【讨论】：

thx，这已经是一个好的开始，但是出了点问题，我收到的是：[{"id":3,"view":true},{"id":3 ,"edit":true},{"id":3,"delete":true},{"id":4,"view":true},{"id":4,"edit":true}, {"id":4,"delete":true}]
啊这是我的代码有问题 :P 感谢您的回答 :)

【解决方案2】：

此代码将准备所需格式的对象数组

var res = [];
$('.permission').each( function() {
if(! res[$(this).data('id')]) {
   res[$(this).data('id')] = {};
   res[$(this).data('id')]['id'] = $(this).data('id');
}

  res[$(this).data('id')][$(this).data('type')] = $(this).is(':checked'); 
});

【讨论】：