javascript - 如何使用javascript从文本区域取消选中复选框时删除电子邮件，有多个动态生成的电子邮件

Question

如何在取消选中文本区域中的复选框的同时删除电子邮件，动态生成多封电子邮件，我可以在取消选中除第一个之外的复选框时删除所有电子邮件...这是我的代码contactCheckbox 是复选框的 idshowList 是 te在此处输入代码xtarea

的 id

var email = "";
    $(document).on('change', "#contactsCheckbox", function () {

        email = "";

        if (this.checked) {

            email = $(this).val().trim() + ";";
            $("#showList").val($("#showList").val() + email);
        }
        else {

            email = this.value;

            var strValAdded = $("#showList").val().toString();

            var rrr = strValAdded.indexOf(email.trim() + ";");

            if (strValAdded.indexOf(email.trim() + ";"))
                strValAdded = strValAdded.replace(email.trim() + ";", "");

            if (strValAdded.indexOf(email.trim()))
                strValAdded = strValAdded.replace(email.trim(), "");

            $("#showList").val(strValAdded);
        }


    });
stringbuilder.Append("<div class=\"checkbox\">");
                stringbuilder.Append("<label><input type =\"checkbox\" id=\"contactsCheckbox\" class=\"chk\" value=\"" + data.Email + "\">" + data.Email + "</label>");
                stringbuilder.Append("</div>");

Answer 1

首先，元素 ID 应该是唯一的。这不是你的问题，但这是非常糟糕的做法，无论如何你都应该纠正它。如果您现在不了解这一点，将来会给您带来更多麻烦。

您真正的问题是，当您获得索引为零的值时，您的“if”语句会触发 false。它将零索引解释为 bool 值检查:

更改:if (strValAdded.indexOf(email.trim() + ";"))

至

if (strValAdded.indexOf(email.trim() + ";") > -1)

附加示例，我在其中放置了一个警报命令，以便您可以更明显地看到 0 索引 bool 检查发生了什么。我还将您的更改触发器更改为按类而不是 ID 进行查找，因为您将修复您的 html，使其在不久的将来不再无效......希望如此。

    $(document).on('change', ".chk", function () {
        if (this.checked) {

            email = $(this).val().trim() + ";";
            $("#showList").val($("#showList").val() + email);
        }
        else {

            email = this.value;
            var strValAdded = $("#showList").val().toString();
            var rrr = strValAdded.indexOf(email.trim() + ";");
            
            alert(Boolean(strValAdded.indexOf(email.trim() + ";")));
            if (strValAdded.indexOf(email.trim() + ";") > -1) {
                strValAdded = strValAdded.replace(email.trim() + ";", "");
            }
            if (strValAdded.indexOf(email.trim()) > -1){
            	strValAdded = strValAdded.replace(email.trim(), "");
            }
            $("#showList").val(strValAdded);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever1@wherwever.com"> whatever1@wherwever.com</label>
</div>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever2@wherwever.com"> whatever2@wherwever.com</label>
</div>
<div class="checkbox">
<label><input type ="checkbox" id="contactsCheckbox" class="chk" value="whatever3@wherwever.com"> whatever3@wherwever.com</label>
</div>

<input type="text" name="lname" style="width: 100%"  id="showList" disabled >