如果在 bootstrap 4 形式中使用 JQuery 取消选中复选框，则删除克隆的元素

Question

因此，我正在使用 Bootstrap 4 和 jQuery 构建此原型。我正在使用它的一些内置类。我在模态中有一堆复选框，单击时必须将其添加到模态之外的下拉列表中。这是复选框在 html:

中的样子

<div class="form-group checkbox">
 <label>
   <input id="cbitem_Premium_Rate" type="checkbox" class="enableInput" onclick="pass2Dropdownlist(this.id);">
   <span class="cb"><i class="cb-icon fa fa-check"></i></span>
   <span class="cb-text">Premium %</span>
 </label>
 <errormsg></errormsn>
</div>

为了将选中的项目添加到下拉列表中，我克隆了带有新 ID 的 ID 为“dditem_template”的标签，并将其附加到 div 标签中：

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  <div id="dd_itemsSelected" class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a id="dditem_template" class="dropdown-item d-none" href="#">Item Selected</a>
    <a id="dditem_null" class="dropdown-item d-none" href="#">No options selected.</a>
  </div>
</div>

这是函数 pass2Dropdownlist(this.id) :

function pass2Dropdownlist(id){
 
 var newID = id.replace("cbitem", "dditem");
 if($(this).find(':checkbox').prop("checked", true)){

   var ddName = id.replace("cbitem", "");
   var ddName = ddName.replace("_", "");
   ddName = replaceAll(ddName, "_", " ");

   var listItem = $("#dditem_template").clone();

   listItem.each(function(){
    $(this).attr('id', newID);
    $(this).text(ddName);
   });

   $("#dd_itemsSelected").append(listItem);
   listItem.removeClass("d-none");
   listItem.addClass("addeditem");
   $("#dditem_null").addClass("d-none");

 }else{
   $("#" + newID).remove();
 }
}

我的问题是，如果我取消选中复选框，下拉列表中的项目不会被删除...相反，它会被再次添加。就好像永远不会进入 if 语句的 else 部分。为什么？我在 else 语句中遗漏了什么吗？我将非常感谢你的帮助！！

Answer 1

我认为您混淆了 pass2Dropdownlist() 中的 this。在您的示例中，它绑定到 window 对象而不是 input 元素。

尝试将元素传递给处理程序：

<input id="cbitem_Premium_Rate" type="checkbox" class="enableInput" onclick="pass2Dropdownlist(this);">

function pass2Dropdownlist(element){
 
 var newID = $(element).attr('id').replace("cbitem", "dditem");
 if($(element).find(':checkbox').prop("checked", true)){

   var ddName = $(element).attr('id').replace("cbitem", "");
   var ddName = ddName.replace("_", "");
   ddName = replaceAll(ddName, "_", " ");

   var listItem = $("#dditem_template").clone();

   listItem.each(function(){
    $(this).attr('id', newID);
    $(this).text(ddName);
   });

   $("#dd_itemsSelected").append(listItem);
   listItem.removeClass("d-none");
   listItem.addClass("addeditem");
   $("#dditem_null").addClass("d-none");

 }else{
   $("#" + newID).remove();
 }
}

如果在 bootstrap 4 形式中使用 JQuery 取消选中复选框，则删除克隆的元素

removing cloned element if a checkbox is unchecked with JQuery in a bootstrap 4 form

checkbox

jquery

clone