Loop over html table and get checked checkboxes (JQuery)

Ketika kita membuat tabel data list yang memuat check box di dalamnya, terkadang kita membutuhkan validasi untuk mengecek apakah salah satu data yang ada di dalam tabel data list tersebut sudah ada yang di pilih sebelum user men-submit atau melakukan proses selanjutnya, namun jika kita tidak menggunakan validasi hal ini bisa saja menyebabkan terjadinya error yang tentunya tidak kita harapkan.
Untuk menghandle masalah diatas kita bisa gunakan jquery untuk proses validasinya. berikut script jquery yang saya gunakan :



$(document).ready( function(){
$('.actions.bottom.left').after(' ');

$("#btn_print_report").click( function(event){
 
 //Menghitung Jumlah Checkbox yang statusnya telah "Checked"
 var jumlahChecked = $('#list_rmis_printLaporan').find('input[type="checkbox"]:checked').length;


 if(jumlahChecked!=0){
  var ID = $('th').filter(function() {
         return $.trim($(this).text()) === 'No Kontrak';
       }).prop('cellIndex'),
     
  $IDs = $("#list_rmis_printLaporan input:checkbox:checked").map(function () {
   var noKontrak = $(this).closest('tr').find('td').eq(ID).text();
   noKontrak = "'"+noKontrak+"'";
   return noKontrak;
  }).get();
  
  var jogetDir = "#envVariable.installationFolder#";
  var jogetFolder = jogetDir.replace(":", ":\\");
  var reportType = $('[name=reportType] option:selected').val();
  var reportUrl = "";
  reportUrl = "/GenerateJasperReport/generateExpenseClaimReport?noKontrak="+$IDs;
  window.location = reportUrl;
  return false;
 }
 else{
  alert("Maaf, belum ada data yang dipilih.");
 }
});

});

dan ini screenshot  hasilnya ketika aplikasi di jalankan :

Loop over html table and get checked checkboxes (JQuery)


Post a Comment

0 Comments