javascript - 无法使用 jquery 删除文本框

Question

我使用 asp.net core 创建了复选框:

<div class="form-group">
    <label asp-for="EthinicalGroups" class="control-label"></label><br />
    @{int i = 0;}
    @foreach (var item in ViewBag.EthinicalGroup)
    {
        <input name="EthinicalGroup" value="@item.Id" type="checkbox" id="EthinicalGroup[@i]" />
        <label>@item.Name</label><br />
        i++;
    }
</div>

在选中复选框时，我添加了一个文本框，在取消选中时，我尝试删除复选框，但无法删除复选框。

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('id');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('id');
        b = className + "value";
        $("#"+b).remove();
    }
});

如何在取消选中复选框时删除文本框。

Answer 1

您需要使用复选框的 value 属性来选择文本框，因为所有复选框的 name 都相同:

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('value');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('value');
        b = className + "value";
        $("#"+b).remove();
    }
});