我怎样才能一次选择多个复选框？ [英] How can I select multiple checkboxes at once?

问题描述

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

$ $ p $ $ $ $ c $ $ each（data，function（id，value）{
rows .push（'< tr>< td>< input type =checkboxautocomplete =offclass =chkboxname =chkboxvalue ='+ value.site +'：'+ value.client + '>< / td>< td>'+ id +'< / td>< td>'+ value.machine +'< / td>< td>'+ value.state +' < / td>< td>'+ value.date_processed +'< / td>< td>< button type =buttononclick =resetSite（\''+ value.site +'\' ，\''+ value.client +'\'）>重置< / td>< / tr>'）;
}）;

我想一次选择多行，并需要将值发布到我的后端服务。
目前我的JavaScript函数是这样的：

$ $ p $ $ $ c $ $ document（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）;
}
}）;
}） ;

在上述功能中，如果我选择了多行，我的警报框会多次显示同一站点。
我该如何克服这个问题？

解决方案

更改 b

  $（document）.on（'change'，'。chkbox'，function（）{
 var sites = []; 
 var value = $（this）.val（）; 
 var res = value.split（：）; $ b $ .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 
}，* / 
错误：function（xhr，textStatus，errorThrown）{
 alert（Failed。Error：+ errorThrown）; 
} 
}）; 
}）; 
  

cor·re·spond·ing

<$ $（$（$（$（$））$（$）$（$）$（$） input [class ='chkbox']：checked），function（）{
var value = $（this）.val（）; //我必须在每个
var res = value .split（：）; //我必须在每个
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）;
}
}）;
}）;

因为在前面的代码中它只会获得您点击的当前复选框的值。值和 res 放入

每个函数知道所有已选中的复选框并获得相应的值。

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?

解决方案

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..

这篇关于我怎样才能一次选择多个复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！