Below code will help you in the followin scenarios
#In a model popup bydefault 10 checkbox are there.in that two are selected.
#if you select all checkbox and close the popup
#again open the popup this time pop up with all checkbox selected instead of selecting 2 checkbox
while clicking on the close and show popup again will work using the below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html lang="en"> <head> <title>Modal Pop up checkbox selection</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body" id="my_popup_box"> <table cellpadding="0" cellspacing="0" width="100%" class="table table-striped table-bordered table-hover dataTable"> <thead> <tr> <th align="center"><input type="checkbox" id="my_check_all" name="my_check_all" value="" /></th> <th align="center">Checkbox Name</th> </tr> </thead> <?php for($i=0;$i<4;$i++){ ?> <tr> <td align="centre"> <input type="checkbox" class="my_checkbox" id="mycheck_<?php echo $i; ?>" name="mycheck_<?php echo $i; ?>" value="<?php echo $i; ?>" <?php if($i==1 || $i==2) { ?> checked="checked" <?php }?>/> </td> <td>Testcheckbox-<?php echo $i; ?></td> </tr> <?php }?> <input type="hidden" name="hidden_chkbox_selection" id="hidden_chkbox_selection" value='1,2'> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel_pop_up">Close</button> </div> </div> </div> </div> </body> </html> <script> $('#myModal').on('click', '#cancel_pop_up', function () { if (document.getElementById("hidden_chkbox_selection").value != '') { hidden_chkbox_selection = document.getElementById("hidden_chkbox_selection").value; hidden_chk_box_array = hidden_chkbox_selection.split(","); $('input:checkbox').prop('checked', false); for(var i = 0; i < hidden_chk_box_array.length; i++) { $('#mycheck_'+hidden_chk_box_array[i]).prop('checked', true); } } else { $('input:checkbox').prop('checked', false); } }); </script> |