javascript - Simulate a click on multiple Checkboxes to issue AJAX request when checkbox attribute is changed with jQuery -
i have matrix style grid allows updatye user permissions items on per user basis.
it uses table grid , issues ajax request update each setting instantly clicked on.
i added jquery code mass check , un-check checkboxes user row.
the issue have need make make ajax request checkboxes in row when row mass checked or un-checked
i have code below demo , jsfiddle demo.
jsfiddle demo: http://jsfiddle.net/jasondavis/7597y7q5/
preview image:
javascript/jquery:
$(document).ready(function() { // check/un-check checkboxes in user row $(".checkall").click(function(){ $(this).parents('tr').find(':checkbox').prop('checked', this.checked); }); // make ajax request update user permission setting in backend database $(".flipswitch").change(function () { var flip = $(this).closest('td'); //alert("perm_id="+this.value+"&permissions=" + this.checked); $.ajax({ type: 'post', url: '<?php echo $_server['php_self']; ?>', data: "perm_id="+ this.value + "&permission=" + this.checked, success: function() { flip.effect("highlight", {color:"#12d812"}, 2000) } }); }); }); table html:
<table> <tbody> <tr class="table_header"> <th> </th> <th align="center">https://google.com/-1</th> <th align="center">https://google.com/-2</th> <th align="center">https://google.com/-3</th> <th align="center">https://google.com/-4</th> <th align="center">https://google.com/-5</th> </tr> <tr> <td><input class="checkall" type="checkbox"> user 1-1</td> <td align="center">user 1<input checked="checked" class= "flipswitch" name="0" type="checkbox" value="1">1</td> <td align="center">user 1<input checked="checked" class= "flipswitch" name="1" type="checkbox" value="2">1</td> <td align="center">user 1<input checked="checked" class= "flipswitch" name="2" type="checkbox" value="3">1</td> <td align="center">user 1<input checked="checked" class= "flipswitch" name="3" type="checkbox" value="4">1</td> <td align="center">user 1<input checked="checked" class= "flipswitch" name="4" type="checkbox" value="5">1</td> </tr> <tr> <td><input class="checkall" type="checkbox"> user 2-2</td> <td align="center">user 2<input checked="checked" class= "flipswitch" name="5" type="checkbox" value="6">2</td> <td align="center">user 2<input checked="checked" class= "flipswitch" name="6" type="checkbox" value="7">2</td> <td align="center">user 2<input checked="checked" class= "flipswitch" name="7" type="checkbox" value="8">2</td> <td align="center">user 2<input checked="checked" class= "flipswitch" name="8" type="checkbox" value="9">2</td> <td align="center">user 2<input checked="checked" class= "flipswitch" name="9" type="checkbox" value="10">2</td> </tr> <tr> <td><input class="checkall" type="checkbox"> user 3-3</td> <td align="center">user 3<input checked="checked" class= "flipswitch" name="10" type="checkbox" value="11">3</td> <td align="center">user 3<input checked="checked" class= "flipswitch" name="11" type="checkbox" value="12">3</td> <td align="center">user 3<input checked="checked" class= "flipswitch" name="12" type="checkbox" value="13">3</td> <td align="center">user 3<input checked="checked" class= "flipswitch" name="13" type="checkbox" value="14">3</td> <td align="center">user 3<input checked="checked" class= "flipswitch" name="14" type="checkbox" value="15">3</td> </tr> <tr> <td><input class="checkall" type="checkbox"> user 4-4</td> <td align="center">user 4<input checked="checked" class= "flipswitch" name="15" type="checkbox" value="16">4</td> <td align="center">user 4<input checked="checked" class= "flipswitch" name="16" type="checkbox" value="17">4</td> <td align="center">user 4<input checked="checked" class= "flipswitch" name="17" type="checkbox" value="18">4</td> <td align="center">user 4<input checked="checked" class= "flipswitch" name="18" type="checkbox" value="19">4</td> <td align="center">user 4<input checked="checked" class= "flipswitch" name="19" type="checkbox" value="20">4</td> </tr> <tr> <td><input class="checkall" type="checkbox"> user 5-5</td> <td align="center">user 5<input checked="checked" class= "flipswitch" name="20" type="checkbox" value="21">5</td> <td align="center">user 5<input checked="checked" class= "flipswitch" name="21" type="checkbox" value="22">5</td> <td align="center">user 5<input checked="checked" class= "flipswitch" name="22" type="checkbox" value="23">5</td> <td align="center">user 5<input checked="checked" class= "flipswitch" name="23" type="checkbox" value="24">5</td> <td align="center">user 5<input checked="checked" class= "flipswitch" name="24" type="checkbox" value="25">5</td> </tr> <tr> <td><input class="checkall" type="checkbox"> user 6-6</td> <td align="center">user 6<input checked="checked" class= "flipswitch" name="25" type="checkbox" value="26">6</td> <td align="center">user 6<input checked="checked" class= "flipswitch" name="26" type="checkbox" value="27">6</td> <td align="center">user 6<input checked="checked" class= "flipswitch" name="27" type="checkbox" value="28">6</td> <td align="center">user 6<input checked="checked" class= "flipswitch" name="28" type="checkbox" value="29">6</td> <td align="center">user 6<input checked="checked" class= "flipswitch" name="29" type="checkbox" value="30">6</td> </tr> </tbody> </table> little css:
table { border: 1px solid #000; } th { background-color: #ccc; } td { border: 1px solid #ccc; }
will fire off lot of requests @ once first thing try triggering change event when set checked property
$(".checkall").click(function(){ $(this).parents('tr') .find(':checkbox') .prop('checked', this.checked) .change();// trigger change event });
Comments
Post a Comment