Adding and removing elements dynamically based on checkbox values

问题

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.

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.

Here's the JSFiddle: http://jsfiddle.net/D5YP7/

Here is my 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>

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?

EDIT: 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.

回答1:

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

回答2:

Should be able to simplify it down to something like this:

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

回答3:

Why add and remove all the DOM elements on the fly. I would rather just hide and show them and insert them to the DOM by default (DEMO).

Insert all your textareas in the 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>

Hide them by default:

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

And then show and hide them according to the checkboxes:

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();

});

I've used the numbers of the checkboxes to get the right textbox by its position in the DOM. If they don't always match you would have to use ids or something else.

来源：https://stackoverflow.com/questions/20809448/adding-and-removing-elements-dynamically-based-on-checkbox-values

标签

jquery

checkbox