Question

为方便起见，我将脚本和html放在一个地方（而不是单独的.js文件）。选中任何复选框后，如果我点击＆＃34;编辑＆＃34;链接然后警报在循环中重复，并且所选复选框的数量在连续出现时报告为0 1 2 3 4 5 ....我们将非常感谢任何人对此事的帮助。

<!doctype html> 
<html>
html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
var ids = new Array();
jq(document).ready(function () {
jq("#edit").click(function(){
jq('input[name="cid"]:checked').each(function() {       
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0) 
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
});  // end #edit click
}); // end document ready

function setCityUpdateAction(){
jq("#edit").click();
}    
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid"  value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid"  value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid"  value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#" onclick="setCityUpdateAction();">edit</a></tr>
</table>
</form>
</body>
</html>

Answer 1

确保重置ids数组，同时序列化表单值，确保为每个输入字段命名！它可以通过serializeArray（）实现，如下所示：

var $form = $(form).serializeArray();

$.each($form, function(i, field) {
    ... 
});

的Javascript

var jq = jQuery.noConflict();

jq(document).ready(function () {
  jq("#edit").click(function(){
    var $form = jq(myform).serializeArray();
    var ids = new Array();

    jq.each($form, function(i, field) {
      ids.push(parseInt(field.value)+"-"+field.name);
    });

    if($form.length > 0) 
      alert($form.length + " cities selected \n"+"their names: "+ids);
    else
      alert("Please select one or more rows to edit.");
  });  // end #edit click
}); // end document ready

HTML

<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="london" value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="newyork" value=2></td>
<td>2</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="paris" value=3></td>
<td>3</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="javascript:;">edit</a></tr>
</table>
</form>

请在此处查看完成方式：{{3}}

Answer 2

试试这个：

<!doctype html> 
<html>
<head>
<title>Cities</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type = "text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq("#edit").click(function(){
var ids = new Array();
jq('input[name="cid"]:checked').each(function() {       
ids.push(parseInt(jq(this).val()));
}); // end checked each
if(ids.length > 0) 
alert(ids.length + " cities selected \n"+"their names: "+ids);
else
alert("Please select one or more rows to edit.");
setCityUpdateAction()
});  // end #edit click
}); // end document ready

function setCityUpdateAction(){
jq("#edit").click();
}    
</script>
</head>
<body>
<form name="myform">
<table border=1px>
<tr><th></th>select<th>CityID</th><th>City</th></tr>
<tr><td><input type="checkbox" name="cid"  value=1></td>
<td>1</td><td>London</td></tr>
<tr><td><input type="checkbox" name="cid"  value=2></td>
<td>1</td><td>New York</td></tr>
<tr><td><input type="checkbox" name="cid"  value=3></td>
<td>1</td><td>Paris</td></tr>
<tr><td></td><td></td><td><a id="edit" href="#">edit</a></tr>
</table>
</form>
</body>
</html>

首先在ids事件中声明jq("#edit").click数组，然后从onclick标记中移除a，并在setCityUpdateAction function内调用jq("#edit").click事件。

我希望这会对你有所帮助。

Answer 3

撰写jq("#edit").click时，您已经拥有了点击事件处理程序。所以你需要摆脱<a>标签中的onclick事件处理程序。所以，它应该是这样的：

<a id="edit" href="#" >edit</a>

此外，由于已设置click事件处理程序，您也可以摆脱功能。所以删除下面的功能。

setCityUpdateAction() {
       jq("#edit").click();
}

使用jQuery收集多个复选框的值

3 个答案:

的Javascript

HTML