在jquery中增加克隆输入的名称属性答案

【问题标题】：Incrementing the name attribute of cloned inputs in jquery在jquery中增加克隆输入的名称属性
【发布时间】：2020-02-17 20:10:06
【问题描述】：

我有一个表单的特定部分（一个选择框和三个复选框）需要根据要求进行复制。我有 div 的克隆以及该特定 div 的递增工作，但是我在递增复选框本身以使其唯一时遇到问题。

这是我的 HTML：

<div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;">
   <h3>Add user to an organization</h3>
   <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]">
      <option value="none">Select an organization</option>
      <option value="152">Test4</option>
      <option value="156">test9</option>
   </select>
   <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2"> c4 Access: <input type="checkbox" name="c4checkbox2">
</div>

单击按钮时，它会创建一个新的 orgboxdupe 框，其 ID 递增，但由于某种原因，它会递增第一个 div 复选框上的数字，而不是随后克隆的复选框上的数字：

这是我的 JS

//Portalorgs - add Users
//Vars
let  $addnewgroupbutton = jQuery( "#addnewgroup" );
let  $mainelement = jQuery("#orguserbox");
let  $dupebox = jQuery(".orgboxdupe");
let  $selectboxid = jQuery("#orggroupadd");
let   $checkboxes = jQuery("input[type='checkbox']");
let  $cloneindex = 1;

//Duplicating add organizations box for users - po-addusers.php
$addnewgroupbutton.click(function() {
    $cloneindex++;
    $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false);
    $checkboxes.each(function(){
    jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex);
  });
  console.log($cloneindex);
});

感谢您提供的任何帮助。

【问题讨论】：

$checkboxes 在页面加载时初始化为页面上的复选框。您永远不会调整它们指向的元素。

标签： javascript php jquery html wordpress

【解决方案1】：

正如@Taplar $checkboxes 所指出的，引用了原始复选框。所以每次点击都会更新它们。

您需要在刚刚复制的克隆中引用checkboxes；你可以像这样使用链接：

    ....
    .end().find(':checkbox').attr('name', function() {
        return this.name + $cloneindex;
    });

//Portalorgs - add Users
//Vars
let  $addnewgroupbutton = jQuery( "#addnewgroup" );
let  $mainelement = jQuery("#orguserbox");
let  $dupebox = jQuery(".orgboxdupe");
let  $selectboxid = jQuery("#orggroupadd");
let   $checkboxes = jQuery("input[type='checkbox']");
let  $cloneindex = 1;

//Duplicating add organizations box for users - po-addusers.php
$addnewgroupbutton.click(function() {
    $cloneindex++;
    $dupebox.clone().appendTo($mainelement).attr("id","user_orggroupadd" + $cloneindex).find(':checked').attr('checked', false)
    //operate on the close via method chaining
    .end().find(':checkbox').attr('name', function() {
        return this.name + $cloneindex;
    });
    /*$checkboxes.each(function(){
    jQuery(this).attr("name",jQuery(this).attr("name") + $cloneindex);
  });*/
  //console.log($cloneindex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addnewgroup">Add New Group</button>
<div id="orguserbox">
<div class="orgboxdupe" style="border: 1px solid lightgrey; padding-left:20px;padding-right:20px;padding-bottom:20px;margin-top:10px; width: 600px;">
   <h3>Add user to an organization</h3>
   <select id="orggroupadd" class="user_groupadd" name="user_orggroupadd[]">
      <option value="none">Select an organization</option>
      <option value="152">Test4</option>
      <option value="156">test9</option>
   </select>
   <br><br>Organization Admin (can view uploaded files): <input type="checkbox" name="orgadmincheckbox2"><br><br>c3 Access: <input type="checkbox" name="c3checkbox2">
   </div>
   </div>

【讨论】：