Jquery 基于复选框值动态添加和删除元素

我试图根据选中的复选框，动态地将textareas添加到表单中的div中。文本区域作为父元素中的

元素添加，因此它只是一个文本区域列表。每当选中“CaseGrounds”复选框时，我的JQuery就会添加文本区域，但如果不选中相关复选框，我不确定如何删除相应的文本区域

我认为在添加textarea之前清空

会很聪明，但这会导致它只添加1个textarea的问题，因为它会在每次更改复选框组时清空元素。另一个问题是，如果我取消选中一个复选框，然后再重新选中一个复选框，它会一次又一次地添加textarea

这是JSFiddle:

这是我的HTML：

<div id="form-Step2">
   <h2>Step 2</h2>
   <ul>
      <li><input type="checkbox" name="CaseGrounds" id="Ground1" value="1">Ground 1</li>
      <li><input type="checkbox" name="CaseGrounds" id="Ground2" value="2">Ground 2</li>
      <li><input type="checkbox" name="CaseGrounds" id="Ground2" value="3">Ground 3</li>
   </ul>
</div>
<div id="form-Step3">
   <h2>Step 3</h2>
   <fieldset>
      <legend>Details of Enquiry</legend>
      <ol>
     // Dynamically put textareas in here //
      </ol>
   </fieldset>
</div>

步骤2

地面1
地面2
地面3

步骤3
查询详情
//动态地将文本区域放在这里//

以下是我的Jquery：

$('input[name="CaseGrounds"]').change(function () {

    $("#form-Step3 ol").empty();  //empty the ol within the div (#form-step3) within the form

    if ($(this).prop('checked')) {  //which checkbox was checked

        if ($(this).val() == '1') { // if it was '1' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>');
        }
        if ($(this).val() == '2') { // if it was '2' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>');
        }
        if ($(this).val() == '3') { // if it was '3' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>');
        }
    }

});

$（'input[name=“CaseGrounds”]”）。更改（函数（）{
$（“#form-Step3 ol”）.empty（）；//清空表单中div（#form-Step3）中的ol
if（$（this.prop（'checked'））{//选中了哪个复选框
如果（$（this.val（）='1'）{//如果是'1'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea1:
”）；
}
如果（$（this.val（）=='2'）{//如果是'2'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea2:
”）；
}
如果（$（this.val（）=='3'）{//如果是'3'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea3:
”）；
}
}
});

我无法从逻辑上理解如何规划我试图实现的目标。有人能帮我吗

---

编辑：我本来应该提到，我的文本区域不会以“textarea1、textarea2、textarea3”等简洁的名称结束。他们最终将被命名为任何合适的名称，例如“投诉、评论、报告”。我很抱歉将代码简化得太多。

应该可以将其简化为以下内容：

$('input[name="CaseGrounds"]').change(function () {
    var val = $(this).val();

    if ($(this).prop('checked')) { //which checkbox was checked
        var txtArea = 'TxtArea' + val;
        $("#form-Step3 ol").append('<li><label for="' + txtArea + '">' + txtArea + ': </label><textarea name="' + txtArea + '" id="' + txtArea + '"></textarea></li>');

    } else {
        $('#TxtArea' + val).parent().remove()
    }

});

$（'input[name=“CaseGrounds”]”）。更改（函数（）{
var val=$（this.val（）；
if（$（this.prop（'checked'））{//选中了哪个复选框
var txtArea='txtArea'+val；
$（“#form-Step3 ol”）。追加（“
”+txtArea+”：
”）；
}否则{
$（'#TxtArea'+val）.parent（）.remove（）
}
});

---

应该能够将其简化为以下内容：

$('input[name="CaseGrounds"]').change(function () {
    var val = $(this).val();

    if ($(this).prop('checked')) { //which checkbox was checked
        var txtArea = 'TxtArea' + val;
        $("#form-Step3 ol").append('<li><label for="' + txtArea + '">' + txtArea + ': </label><textarea name="' + txtArea + '" id="' + txtArea + '"></textarea></li>');

    } else {
        $('#TxtArea' + val).parent().remove()
    }

});

$（'input[name=“CaseGrounds”]”）。更改（函数（）{
var val=$（this.val（）；
if（$（this.prop（'checked'））{//选中了哪个复选框
var txtArea='txtArea'+val；
$（“#form-Step3 ol”）。追加（“
”+txtArea+”：
”）；
}否则{
$（'#TxtArea'+val）.parent（）.remove（）
}
});

---

您可以根据复选框的值为

li提供
id
，如果未选中，则可以将其删除

$('input[name="CaseGrounds"]').change(function () {

    //$("#form-Step3 ol").empty();  //empty the ol within the div (#form-step3) within the form

    if ($(this).prop('checked')) {  //which checkbox was checked

        if ($(this).val() == '1') { // if it was '1' then add the li below
            $("#form-Step3 ol").append('<li id="li_1"><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>');
        }
        if ($(this).val() == '2') { // if it was '2' then add the li below
            $("#form-Step3 ol").append('<li id="li_2"><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>');
        }
        if ($(this).val() == '3') { // if it was '3' then add the li below
            $("#form-Step3 ol").append('<li id="li_3"><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>');
        }
    } else {
        $('#li_'+$(this).val()).remove();
    }

});

$（'input[name=“CaseGrounds”]”）。更改（函数（）{
//$（“#form-Step3 ol”）.empty（）；//清空表单中div（#form-Step3）中的ol
if（$（this.prop（'checked'））{//选中了哪个复选框
如果（$（this.val（）='1'）{//如果是'1'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea1:
”）；
}
如果（$（this.val（）=='2'）{//如果是'2'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea2:
”）；
}
如果（$（this.val（）=='3'）{//如果是'3'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea3:
”）；
}
}否则{
$（'#li'+$（this.val（））.remove（）；
}
});

您可以根据复选框的值为
li
提供一个
id
，如果未选中，则可以将其删除

$('input[name="CaseGrounds"]').change(function () {

    //$("#form-Step3 ol").empty();  //empty the ol within the div (#form-step3) within the form

    if ($(this).prop('checked')) {  //which checkbox was checked

        if ($(this).val() == '1') { // if it was '1' then add the li below
            $("#form-Step3 ol").append('<li id="li_1"><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>');
        }
        if ($(this).val() == '2') { // if it was '2' then add the li below
            $("#form-Step3 ol").append('<li id="li_2"><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>');
        }
        if ($(this).val() == '3') { // if it was '3' then add the li below
            $("#form-Step3 ol").append('<li id="li_3"><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>');
        }
    } else {
        $('#li_'+$(this).val()).remove();
    }

});

$（'input[name=“CaseGrounds”]”）。更改（函数（）{
//$（“#form-Step3 ol”）.empty（）；//清空表单中div（#form-Step3）中的ol
if（$（this.prop（'checked'））{//选中了哪个复选框
如果（$（this.val（）='1'）{//如果是'1'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea1:
”）；
}
如果（$（this.val（）=='2'）{//如果是'2'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea2:
”）；
}
如果（$（this.val（）=='3'）{//如果是'3'，则在下面添加li
$（“#form-Step3 ol”）。追加（“
TxtArea3:
”）；
}
}否则{
$（'#li'+$（this.val（））.remove（）；
}
});

为什么要动态添加和删除所有DOM元素。我宁愿隐藏和显示它们，并在默认情况下将它们插入DOM（）

在html中插入所有文本区域：

<ol>
    <li><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>
    <li><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>
    <li><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>
</ol>

然后根据复选框显示和隐藏它们：

var textareas$ = $('#form-Step3 ol li');

$('input[name="CaseGrounds"]').change(function () {

    var elem$ = $(this);
    var correspelem$ = textareas$.eq(elem$.val() - 1);

    if(elem$.is(':checked')) correspelem$.show();
    else correspelem$.hide();

});

我使用了复选框的编号，通过它在DOM中的位置来获得正确的文本框。如果它们不总是匹配，您就必须使用ID或其他东西。
为什么要动态添加和删除所有DOM元素。我宁愿隐藏和显示它们，并在默认情况下将它们插入DOM（）

在html中插入所有文本区域：

<ol>
    <li><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>
    <li><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>
    <li><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>
</ol>

然后根据复选框显示和隐藏它们：

var textareas$ = $('#form-Step3 ol li');

$('input[name="CaseGrounds"]').change(function () {

    var elem$ = $(this);
    var correspelem$ = textareas$.eq(elem$.val() - 1);

    if(elem$.is(':checked')) correspelem$.show();
    else correspelem$.hide();

});

我使用了复选框的编号，通过它在DOM中的位置来获得正确的文本框。如果它们不总是匹配，您将不得不使用ID或其他东西。
显示表单的标记-您可能更好地概括代码，以添加或删除更改事件上的文本区域，但了解标记结构是必要的，首先显示表单的标记-您可能更好地概括代码以