Advertisement
eyuprog

Multiple Select Row With Bootstrap Modal

Jul 6th, 2015
279
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.55 KB | None | 0 0
  1. <!-- BOOTSTRAP -->
  2. <link href="<?php echo base_url();?>assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  3.  
  4.  
  5. <textarea id="output" placeholder="Klik disini"></textarea>
  6.  
  7.  
  8. <div class="modal fade inimodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  9.   <div class="modal-dialog modal-lg">
  10.     <div class="modal-content">
  11.       <div class="modal-body">
  12.           <table class="table table-bordered">
  13.               <thead>
  14.                   <th><input type="checkbox" id="checkall"/></th>
  15.                   <th>Nama</th>
  16.               </thead>
  17.               <tbody>
  18.                   <tr>
  19.                       <td><input type="checkbox" class="chk" id="orang[1]" value="Abdul"/></td>
  20.                       <td>Abdul</td>
  21.                   </tr>
  22.                   <tr>
  23.                       <td><input type="checkbox" class="chk" id="orang[2]" value="Budi"/></td>
  24.                       <td>Budi</td>
  25.                   </tr>
  26.                   <tr>
  27.                       <td><input type="checkbox" class="chk" id="orang[3]" value="Cinta"/></td>
  28.                       <td>Cinta</td>
  29.                   </tr>
  30.                   <tr>
  31.                       <td><input type="checkbox" class="chk" id="orang[4]" value="Doni"/></td>
  32.                       <td>Doni</td>
  33.                   </tr>
  34.               </tbody>
  35.           </table>
  36.           <button type="button" id="pilih" class="btn btn-primary">Selesai</button>
  37.       </div>
  38.     </div>
  39.   </div>
  40. </div>
  41.  
  42. <!-- JQUERY -->
  43. <script src="<?php echo base_url();?>assets/plugins/jquery/jquery-1.11.3.min.js"></script>
  44. <!-- BOOTSTRAP JS -->
  45. <script src="<?php echo base_url();?>assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  46. <script>
  47. $(document).ready(function(){
  48.     $("#output").click(function(){
  49.         $(".inimodal").modal("show");
  50.     });
  51.    
  52.     $("#checkall").change(function(){
  53.         if(this.checked){
  54.             $(".chk").each(function(){
  55.                 this.checked=true;
  56.             });
  57.         }else{
  58.             $(".chk").each(function(){
  59.                 this.checked=false;
  60.             });
  61.         }
  62.     });
  63.    
  64.     $("#pilih").click(function(){
  65.         var str = [], item;
  66.         $.each($('.chk:checked'), function (index, value) {
  67.             item = $(this).val();                  
  68.             str.push(item);                  
  69.         });
  70.         var selek=str.join(',');
  71.         alert(selek);
  72.     var output=str.join('\n');
  73.         $("#output").text(output);
  74.         $(".inimodal").modal('hide');
  75.     });
  76. });
  77. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement