Question

问题在于：

我使用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。

Data-type属性表示我正在编辑的权限类型。

所以，我想要检索的数组（稍后将在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.

感谢您阅读/帮助

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

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

JQuery将复选框组作为数组

2 个答案: