javascript - JQuery get checkboxes groups as arrays -


here problem :

i use jquery 2.x, need retrieve data array on event (click).

i have several checkboxes, these checkboxes represent permissions users.

here looks :

<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 attribute represents user id editing permissions for.

data-type attribute represents type of permission editing.

so, want retrieve array (that handled in php later) should :

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

thanks reading/help

use "insert if not present" pattern. code below explains better:

// caching elements of intrest  var $checkboxes = $('.permission');  var $testbtn = $('#testbtn');  var $output = $('#output');    function getuserpermissions(userid, permissiontable){    var returnval = null;    (var = 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 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>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -