Javascript 使用复选框中选中的值自动填充文本框值,但保留手动输入的值
我使用下面的jquery根据选中或未选中复选框的值自动填充文本框Javascript 使用复选框中选中的值自动填充文本框值,但保留手动输入的值,javascript,jquery,html,Javascript,Jquery,Html,我使用下面的jquery根据选中或未选中复选框的值自动填充文本框 function updateTextArea() { var allVals = []; $('#all :checked').each(function () { allVals.push($(this).val()); }); document.getElementById('txtbox').value = allVals;
function updateTextArea() {
var allVals = [];
$('#all :checked').each(function () {
allVals.push($(this).val());
});
document.getElementById('txtbox').value = allVals;
}
$(function () {
$('#all input').click(updateTextArea);
updateTextArea();
});
我的html代码是
<div id="all">
<input id="txtbox" type="text" Height="100px" Width="770px" />
<input id="Checkbox2" type="checkbox" value="abc1@abc.com" />
<input id="Checkbox3" type="checkbox" value="abc2@abc.com" />
<input id="Checkbox4" type="checkbox" value="abc3@abc.com" />
<input id="Checkbox5" type="checkbox" value="abc4@abc.com" />
</div>
上面的jquery适用于复选框的每个选中和取消选中事件,并将其值填充到以逗号分隔的文本框中。我的问题是,如果有人在上面的文本框中手动输入以逗号分隔的电子邮件,我希望保留该值,而不是刷新我的复选框的选中和取消选中事件。如何实现这一点?解决这一问题的一般方法是: 在每次选中或取消选中时:
1.用逗号将列表拆分为一个数组。
2.收集所有已检查的预设电子邮件值(您已经在执行此操作)。
3.找到不在预设数组中的每个分割值,并将其放在一边。
4.插入所有选中的预设值,然后添加所有古怪值,反之亦然 这不会保留顺序,但会保留任何手动输入的值。保留订单是可以做到的,但会有点棘手
你也可以考虑只使用一个单独的“附加电子邮件”文本框,它可以减少这种复杂性,并可能使用户更直观。 代码:
好了$(function () {
txtbox = $("#txtbox");
var prevVal;
$("input[type='checkbox']").click(function() {
prevVal = txtbox.val();
if($(this).is(":checked"))
{
txtbox.val(prevVal + $(this).val() + ", ");
}
else
{
prevVal = prevVal.replace($(this).val()+", ", "");
txtbox.val(prevVal);
}
});
});
在现有代码中需要注意的一点是,您查询DOM的次数太多(每次选中复选框时都会重复),不要这样做。另外,当JQuery可用时,为什么要使用document.getElementById
这可能不是一个完美的解决方案,但很有效
$(function () {
txtbox = $("#txtbox");
var prevVal;
$("input[type='checkbox']").click(function() {
prevVal = txtbox.val();
if($(this).is(":checked"))
{
txtbox.val(prevVal + $(this).val() + ", ");
}
else
{
prevVal = prevVal.replace($(this).val()+", ", "");
txtbox.val(prevVal);
}
});
});