如何一次选择多个复选框？

Question

I have a html table which is created dynamically. Im adding check box for each row.

$.each(data, function(id, value) {
  rows.push('<tr><td><input type="checkbox"  autocomplete="off" class="chkbox" name="chkbox" value="'+value.site+':'+value.client+'"></td><td>' + id + '</td><td>' + value.machine + '</td><td>' + value.state + '</td><td>' + value.date_processed + '</td><td><button type="button" onclick="resetSite(\''+ value.site+'\',\''+value.client+'\')">Reset</td></tr>');
});

I want to select multiple rows at once and need to POST the values to my backend service. Currently my JavaScript function is like;

$(document).on('change','.chkbox',function () {
  var sites = [];
  var value = $(this).val();
  var res = value.split(":");
  $.each($("input[class='chkbox']:checked"), function(){            
    sites.push(res[0]);
  });
  alert("sites are: " + sites.join(", "));
  $.ajax({
    type: "POST",
    url: "http://localhost:8080/cache/setProcessing?site="+res[0]+"&client="+res[1],
    /*data: {
      chkbox: value 
    },*/
    error : function(xhr, textStatus, errorThrown) {
      alert("Failed. Error : " + errorThrown);
    }
  });
});

in the above function my alert box shows same site multiple times if I selecet more than one row. How can I overcome this?

Answer 1

Change

$(document).on('change','.chkbox',function () {
  var sites = [];
  var value = $(this).val();
  var res = value.split(":");
  $.each($("input[class='chkbox']:checked"), function(){            
    sites.push(res[0]);
  });
  alert("sites are: " + sites.join(", "));
  $.ajax({
    type: "POST",
    url: "http://localhost:8080/cache/setProcessing?site="+res[0]+"&client="+res[1],
    /*data: {
      chkbox: value 
    },*/
    error : function(xhr, textStatus, errorThrown) {
      alert("Failed. Error : " + errorThrown);
    }
  });
});

cor·re·spond·ing

$(document).on('change','.chkbox',function () {
  var sites = [];
  $.each($("input[class='chkbox']:checked"), function(){    
    var value = $(this).val(); // must me be inside the each
    var res = value.split(":");   // must me be inside the each     
    sites.push(res[0]);
  });
  alert("sites are: " + sites.join(", "));
  $.ajax({
    type: "POST",
    url: "http://localhost:8080/cache/setProcessing?site="+res[0]+"&client="+res[1],
    /*data: {
      chkbox: value 
    },*/
    error : function(xhr, textStatus, errorThrown) {
      alert("Failed. Error : " + errorThrown);
    }
  });
});

Because in the previous code it only gets the value of the current checkbox you've clicked.

So you must put the value and res inside the each function to know all checkboxes that have been checked and get there corresponding value..