如果在引导程序 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 为"dditem_template"的 a 标签克隆为新 id，并将其附加到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();
}
}