2

我使用下面的 jquery 根据选中或未选中复选框的值自动填充文本框

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 适用于复选框的每个选中和取消选中事件，并将其值填充到用逗号分隔的文本框中，我的问题是如果有人在上面的文本框中手动输入一些用逗号分隔的电子邮件，我希望保留该值而不是为我的复选框的选中和取消选中事件刷新。我怎样才能做到这一点？

4

2 回答 2

2

我用来解决这个问题的一般技术是：

在每次选中或取消选中时：
1. 用逗号将列表拆分为一个数组。
2. 收集所有已检查的预设电子邮件值（您已经这样做了）。
3. 找出每个不在预设数组中的分割值，并将其放在一边。
4. 插入所有选中的预设值，然后添加所有的奇数，反之亦然。

这不会保留顺序，但会保留任何手动输入的值。可以保留订单，但会有点棘手。

您也可以考虑只使用一个单独的“附加电子邮件”文本框，这将降低其复杂性并可能使其对用户更直观。

代码：

function updateTextArea() {
    var allVals = [];
    var checkedVals = [];

    $('#all input[type=checkbox]').each(function () {
        allVals.push($(this).val());
    });

    $('#all :checked').each(function () {
        checkedVals.push($(this).val());
    });

    var potentialOtherEmails = $("#txtbox").val().split(",");
    var confirmedOtherEmails = [];
    $(potentialOtherEmails).each(function(index,value) {
        if ($.inArray(value, allVals) == -1) {
            confirmedOtherEmails.push(value);
        }
    });

    $("#txtbox").val($.merge(checkedVals,confirmedOtherEmails));    
}

$(function () {
    $('#all input').click(updateTextArea);
    updateTextArea();
});
于 2013-02-15T11:58:31.657 回答
1

给你....

$(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 过多（在每次检查时迭代复选框），不要这样做。document.getElementById另外，当您有可用的 JQuery 时，为什么还要使用？:-) 这可能不是一个完美的解决方案，但有效！

于 2013-02-15T12:06:26.260 回答