click checkbox dynamically and add the email address in list and remove duplicate email address using javascript

Question

File name : contact.jsp

${contactList} have more than one contacts.

1. if checkbox is checked , then it will be added emailList class , if checkbox is unchecked , then email address will be removed from list.
2. remove the duplicate email address from list.
3. eg : [email protected] , [email protected] - here in middle of email address put comma
4. finally assign the all email address to parent page id $("#toAddress").

<c:forEach items="${contactList}" var="contact">             
    <cong:td>
        <input type="checkbox" name="selectContact"  id="selectContact" class="emailList" onclick="addEmailinList(${contact.email});"/>
    </cong:td>
    <cong:td>${contact.accountNo}</cong:td>
    <cong:td>${contact.firstName}&nbsp;&nbsp;${contact.lastName}</cong:td>
    <cong:td>${contact.position}</cong:td>
    <cong:td>${contact.email}</cong:td>
    <cong:td>${contact.phone}</cong:td>
    <cong:td>${contact.fax}</cong:td>
</c:forEach>

       <cong:td>
         <input type="button" value="Submit" class="button-style1"  style="width:50px;" onclick="definepls();"/>
       </cong:td>

file name : contact.js

function addEmailinList(ele) {
    var mailList = [];
    $(".emailList:checked").each(function () {
        alert(ele);            //  here i got email address.
        mailList.push(ele);
    });
    parent.$("#toAddress").val($(".emailList").val());
}

Answer 1

To populate all checked emails to $('#toAddress')you can do:

1. Remove the onclick="addEmailinList(${contact.email});" and add data-email="${contact.email}" to take reference of the email on all checkbox input fields
2. Set a jQuery change event listener on all $('input.emailList')

View file:

<c:forEach items="${contactList}" var="contact">
    <cong:td>
        <input type="checkbox" name="selectContact" id="selectContact" class="emailList" data-email="${contact.email}">
    </cong:td>
    <cong:td>${contact.accountNo}</cong:td>
    <cong:td>${contact.firstName}&nbsp;&nbsp;${contact.lastName}</cong:td>
    <cong:td>${contact.position}</cong:td>
    <cong:td>${contact.email}</cong:td>
    <cong:td>${contact.phone}</cong:td>
    <cong:td>${contact.fax}</cong:td>
</c:forEach>

<cong:td>
    <input type="button" value="Submit" class="button-style1" style="width:50px;" onclick="definepls()" />
</cong:td>

JavaScript file:

$('input.emailList').on('change', function () {
    var $this = $(this),
        $toAddress = $('#toAddress'),
        email = $this.data('email'),
        mailList = ($toAddress.text() !== '') ? $toAddress.text().split(', ') : [];

    if ($this.is(':checked')) {
        // Add email to the list
        mailList.push(email);
    } else {
        // Remove email from the list
        for (var i = mailList.length - 1; i >= 0; i--) {
            if (mailList[i] === email) {
                mailList.splice(i, 1);
                break;
            }
        }
    }

    // Populate #toAddress 
    $toAddress.html(mailList.join(', '));
});