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

时间:2017-10-19 03:06:49

标签: javascript jquery html

我有一个动态创建的html表。我添加了每行的复选框。

$.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>');
});

我想一次选择多行,并且需要将值POST到我的后端服务。 目前我的JavaScript函数就像;

$(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);
    }
  });
});

在上面的函数中,如果我选择多行,我的警告框会多次显示同一个站点。 我怎么能克服这个?

1 个答案:

答案 0 :(得分:2)

更改

$(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·荷兰国际集团

$(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);
    }
  });
});

因为在之前的代码中,它只获取您单击的当前复选框的值。

因此,您必须将valueres放在each function内,以便知道已经检查过的所有复选框,并获得相应的值。