基于复选框值动态添加和删除元素 [英] Adding and removing elements dynamically based on checkbox values

问题描述

我试图动态添加textareas到一个表格内的div，取决于选中的复选框。 textareas作为< ol> 父元素中的< li> 元素添加， textareas。我的JQuery添加textareas，当CaseGrounds复选框被选中，但我不知道如果相关的复选框未选中，如何删除相应的textareas。

I'm trying to dynamically add textareas to a div within a form depending on which checkboxes are checked. The textareas are added as <li> elements within an <ol> parent element so its just a list of textareas. My JQuery adds the textareas whenever the "CaseGrounds" checkboxes are checked, but I'm not sure how to remove the appropriate textareas if the relevant checkbox is unchecked.

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

I thought I would be clever and empty the <ol> before adding textareas, but this causes the problem of it only ever adding 1 textarea because its emptying the element on every change of the checkbox group. Another issue is that if I uncheck and then recheck a checkbox, it keeps adding the textarea over and over again.

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

Here's the 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：

Heres my 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>');
        }
    }

});

我无法在逻辑上找出如何编程我想实现的。任何人都可以帮助我吗？

I'm not able to logically figure out how to program what I'm trying to achieve. Can anyone help me please?

编辑：我本来应该提到我的文本区域不会被命名为 textarea1，textarea2，textarea3等。他们将最终被命名任何合适的例如。 投诉，评论，报告。

I should have originally mentioned that my textareas are not going to end up being named so neatly as "textarea1, textarea2, textarea3" and so on. They will end up being named whatever is suitable e.g. "complaint, comment, report". My apologies for simplifying the code too much.

推荐答案

您可以给予 id 到 li ，根据复选框的值，可以删除它

You can give an id to the li based on the value of the checkbox and can remove it if it is not checked

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

这篇关于基于复选框值动态添加和删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！