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);
        }
    });
});

既存のコードに関する注意点の1つは、DOMにクエリを実行しすぎていることです（チェックを行うたびにチェックボックスを繰り返します）。そうしないでください。document.getElementByIdまた、 JQueryを利用できるのになぜ使用するのですか？:-)これは完璧な解決策ではないかもしれませんが、機能します!!

于 2013-02-15T12:06:26.260 に答える