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
Post a Comment