动态单击复选框并在列表中添加电子邮件地址并使用 javascript 删除重复的电子邮件地址
click checkbox dynamically and add the email address in list and remove duplicate email address using javascript
文件名:contact.jsp
${contactList}
有多个联系人。
- 如果选中复选框,则会将其添加到电子邮件列表class,如果未选中复选框,则会将电子邮件地址从列表中删除。
- 从列表中删除重复的电子邮件地址。
- 例如:kumar@gmail.com , sam@yahoo.com - 在电子邮件地址中间放逗号
- 最后将所有电子邮件地址分配给父页面 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} ${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());
}
要将所有选中的电子邮件填充到 $('#toAddress')
,您可以执行以下操作:
- 删除
onclick="addEmailinList(${contact.email});"
并添加 data-email="${contact.email}"
以在所有复选框输入字段上引用 email
- 在所有
$('input.emailList')
上设置 jQuery change
事件侦听器
查看文件:
<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} ${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(', '));
});
文件名:contact.jsp
${contactList}
有多个联系人。
- 如果选中复选框,则会将其添加到电子邮件列表class,如果未选中复选框,则会将电子邮件地址从列表中删除。
- 从列表中删除重复的电子邮件地址。
- 例如:kumar@gmail.com , sam@yahoo.com - 在电子邮件地址中间放逗号
- 最后将所有电子邮件地址分配给父页面 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} ${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());
}
要将所有选中的电子邮件填充到 $('#toAddress')
,您可以执行以下操作:
- 删除
onclick="addEmailinList(${contact.email});"
并添加data-email="${contact.email}"
以在所有复选框输入字段上引用email
- 在所有
$('input.emailList')
上设置 jQuery
change
事件侦听器
查看文件:
<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} ${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(', '));
});