时间戳

首页 > 解决方案 > 如果在 bootstrap 4 表单中未使用 JQuery 选中复选框，则删除克隆的元素

jquery - 如果在 bootstrap 4 表单中未使用 JQuery 选中复选框，则删除克隆的元素

问题描述

所以，我正在使用 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 语句中遗漏了什么吗？我将非常感谢您的帮助！

标签： jquerycheckboxclone

解决方案

我认为你在混淆this内部pass2Dropdownlist()。在您的示例中，它绑定到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();
 }
}

推荐阅读