动态单击复选框并在列表中添加电子邮件地址,并使用javascript删除重复的电子邮件地址

时间:2016-10-04 06:47:21

标签: javascript jquery jsp checkbox jsp-tags

文件名:contact.jsp

${contactList}有多个联系人。

  1. 如果选中复选框,则会添加emailList类,如果未选中复选框,则会从列表中删除电子邮件地址。
  2. 从列表中删除重复的电子邮件地址。
  3. 例如:kumar @ gmail.com,sam @ yahoo.com - 在电子邮件地址中间放逗号
  4. 最后将所有电子邮件地址分配给父网页ID $("#toAddress")
  5. <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>
    

    文件名: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());
    }
    

1 个答案:

答案 0 :(得分:1)

要将所有已检查的电子邮件填充到$('#toAddress'),您可以执行以下操作:

  1. 移除onclick="addEmailinList(${contact.email});"并添加data-email="${contact.email}"以在所有复选框输入字段中引用email
  2. 在所有change
  3. 上设置jQuery $('input.emailList')事件侦听器

    查看文件:

    <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文件:

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