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

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

javascript jquery checkbox

Javascript 使用jQuery收集多个复选框的值,javascript,jquery,checkbox,Javascript,Jquery,Checkbox,为了方便起见，我将脚本和html放在一个地方，而不是单独的.js文件。选中任何复选框后，如果单击“编辑”链接，则警报将在循环中不断重复，所选复选框的数量将报告为0 1 2 3 4 5。。。。在连续发生的事件中。在这件事上任何人的帮助都将不胜感激 <!doctype html> <html> html> <head> <title>Cities</title> <script type="text/javascript" s

为了方便起见，我将脚本和html放在一个地方，而不是单独的.js文件。选中任何复选框后，如果单击“编辑”链接，则警报将在循环中不断重复，所选复选框的数量将报告为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>

确保重置ids数组，并序列化表单值，确保为每个输入字段命名！它可以通过以下方式实现：

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

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

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

Javascript HTML 请参见此处操作方法：

尝试以下操作：

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

首先在jqedit.click事件中声明ids数组，然后从标记中删除onclick并在jqedit.click事件中调用setCityUpdateAction函数

我希望这将对您有所帮助。

在编写jqedit.click时，您已经有了click事件处理程序。因此，您需要去掉标记中的onclick事件处理程序。所以，它应该是这样的：

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

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

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

感谢Pankaj花时间关注这个问题。实际上，我想试验是否可以从jQuery$document.ready外部调用jqedit.click。我的试验实际上创建了事件循环。谢谢你的建议。谢谢萨米的回复。实际上，我想试验一下jqedit.click是否可以从jQuery$document.ready外部调用。我将ids数组保留在jqedit.click之外，以使其数据可供其他一些javascript函数使用，这些javascript函数尚未在同一html文件中编码。请您解释一下，将ids设置为jqedit.click的本地将如何改善情况。如果您将ids数组保留在jqedit.click之外，则每次单击“编辑”时，所选值的数量都将增加，因为您的ids数组是一个全局scop，因此它将保留所有以前选择的值，例如，如果希望ids数组作为全局数组scop，那么ids.length将保持递增，而不是只给出所选值的数目，因此保持var ids=new array；在jqedit外部。像以前一样单击并添加ID=[]；inseide jqedit.click可重置ids数组，以便每次单击“编辑”时只能获取所选的值。感谢您的输入。我已经通过在jqedit.clickThank SurudoiRyu的开头设置ids.length=0对此进行了测量。你的解决方案让我用另一种方式思考。祝你好运，别忘了向别人推荐或标记你的解决方案。

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