Jquery重复动态复选框不起作用答案

【问题标题】：Jquery duplicate dynamic checkboxes not workingJquery重复动态复选框不起作用
【发布时间】：2017-01-06 14:11:58
【问题描述】：

我正在每个游戏装置内创建动态表单，以便他们可以邀请玩家。创建团队表时，我会取名字并创建一个列表。

/* Get team players information */
                    if (data.team_members){
                        $.each(data.members,function(index,item){
                            if (data.r_id <= 2){
                                members += '<tr class="refresh"><td style="padding: 0.20em;">'+
                                '<a href="#">'+item.forename+'  '+item.surname+'</a>'+
                                '</td><td style="padding: 0.20em;">'+item.role;
                            }else{
                                members += '<tr class="refresh">'+
                                    '<td style="padding: 0.20em;">'+item.forename+' '+item.surname+'</td>'+
                                    '<td style="padding: 0.20em;">'+item.role;
                            }
                            if (item.r_id == 3){
                                invite += '<li>'+item.forename+' '+item.surname+
                                    '<input type="checkbox" id="check'+i+'" name="invites[]" value="'+item.p_id+'" checked/>'+
                                    '<label style="float:right;" for="check'+i+'">&nbsp;</label></li>'; 
                            i++;
                            }
                            members += '</td></tr>';

                        });
                        $("#team_list > tbody:last-child").append(members);
                    }

问题在于复选框，我创建了一个var邀请，所有玩家的名字都进入了变量。稍后在代码中我添加了动态表单

f +='</center></td></tr><tr><td class="invite_form-'+i+'" style="display:none;">'+
                                    '<form id="iForm'+i+'" name="addIForm'+i+'"><ul class="alt">'+invite+'</ul>'+
                                    '<a href="#" id="submitInvite'+i+'" class="button submitInvite fit small">Submit</a>'+
                                    '</form></td></tr>';
                                i++;
                            }

页面加载，我可以打开表单。第一种形式有效，我可以单击复选框。当我打开第二个表单时，复选框单击第一个表单。

我假设它是因为复选框 ID。有没有人遇到过这个问题。

【问题讨论】：

当您可以像在回调中使用 item 一样使用索引参数时，为什么要在 forEach 循环中声明和递增变量？尝试 id="check' + index + ' " ' 而不是你现在使用的。或者，您也可以使用 item.p_id 来连接输入的 id。
这可能是因为复选框的名称属性相同。尝试为每组复选框创建唯一的名称...

标签： jquery html forms checkbox

【解决方案1】：

改成Json数组

if (item.r_id == 3){
                                tmp ={  'fore': item.forename,
                                        'sur': item.surname,
                                        'p_id': item.p_id
                                     }
                                jsonObj.push(tmp);
                            }

然后我循环 json 并为每个创建的复选框增加 id，所以我创建了多少并不重要

f +='</center></td></tr><tr><td class="invite_form-'+i+'" style="display:none;">'+
                                    '<form id="iForm-'+i+'" name="addIForm-'+i+'"><ul class="alt">';
                                $.each(jsonObj, function(index, item) {
                                    f += '<li>'+item.fore+'<input type="checkbox" id="check-'+m+'" name="invites[]" value="" checked/>'+
                                    '<label style="float:right;" for="check-'+m+'">&nbsp;</label></li>';
                                    m++;
                                });
                                f += '</ul>'+
                                    '<a href="#" id="submitInvite-'+i+'" class="button submitInvite fit small">Submit</a>'+
                                    '</form></td></tr>';
                                i++;
                            }

这次我就是这样解决的

【讨论】：