Question

我正在尝试动态地将textareas添加到表单中的div，具体取决于选中的复选框。 textareas在<li>父元素中添加为<ol>元素，因此它只是textareas的列表。每当选中“CaseGrounds”复选框时，我的JQuery会添加textareas，但如果未选中相关复选框，我不确定如何删除相应的textareas。

我认为在添加textareas之前我会聪明并清空<ol>，但这会导致它只会添加1个textarea的问题，因为它会在复选框组的每次更改时清空该元素。另一个问题是，如果我取消选中然后重新检查一个复选框，它会一遍又一遍地添加textarea。

这是JSFiddle：http://jsfiddle.net/D5YP7/

这是我的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>

继承我的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>');
        }
    }

});

我无法逻辑地弄清楚如何编程我想要实现的目标。有人可以帮帮我吗？

编辑：我本来应该提到我的textareas最终不会像“textarea1，textarea2，textarea3”那样整齐地命名等等。它们最终会被命名为合适的任何东西，例如“投诉，评论，报告”。对于过分简化代码我表示歉意。

Answer 1

应该能够将其简化为类似的东西：

$('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()
    }

});

的 DEMO

Answer 2

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

$('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();
    }

});

FIDDLE

Answer 3

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

在html中插入所有textareas：

<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>

默认隐藏它们：

#form-Step3 ol li {
    display: none;
}

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

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或其他内容。

根据复选框值动态添加和删除元素

3 个答案: