Question

I am trying to create a JavaScript-based application which only needs to work in IE8 and 9.

This is a simplified description of the problem:

<div id="A" style="display:none">
<div id="a1">content of a1</div>
<div id="a2">content of a2</div>
<div id="a3">content of a3</div>
...goes on
</div>

<div id="B">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
...goes on
</div>`

I have a checkbox for each div under div “A”.

I need a simple JavaScript function that will copy, or delete, the content of the divs under div “A” to those under div “B” depending on which of the checkboxes are checked.

For example, if checkbox “a1” is checked, the content of div “a1” will get copied to div “b1”, or delete the content of “b1” if the box is unchecked.

Simple as that is, although I can’t figure it out, the whole div “B” will be then copy-pasted to an email, so the div “B” cannot contain any hidden elements. I can not use textarea.

Answer 1

Modified Markup and Javascript code. Please note the use of class attribute in the checkbox element to find out the source and destination divs.

HTML

<div id="A" style="display:none">
<div id="a1">content of a1</div>
<div id="a2">content of a2</div>
<div id="a3">content of a3</div>
</div>

<div id="B">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
</div>

<input type="checkbox" class="1">
<input type="checkbox" class="2">
<input type="checkbox" class="3">

Javascript

$(document).ready(function(){
    $("input[type=checkbox]").click(function(){
       var source= $("#a" + $(this).attr('class'));
       var destination= $("#b" + $(this).attr('class'));
       if($(this).attr('checked')=='checked')
          $(destination).html($(source).html());
       else     
           $(destination).html("");
    });

});

http://jsfiddle.net/7qmQM/1/