3

クラスチェック（cb1、cb2、cb3、...という名前）に5つのチェックボックスがあり、クラステキスト（tf1、tf2、tf3、...）に5つの対応するテキストフィールドがあります。1つ以上のチェックボックスがオンになっている場合、チェックされているすべてのチェックボックスをカウントし、ボタンがクリックされたときに対応するテキストフィールドに合計を配置します。

例：cb1とcb3がチェックされている場合、tf1とtf3の値は2になります。

これまでのところ、次のようにチェックされたチェックボックスの合計を数えています。

$(':button').click(function() {
    total= $('.check:checked');
    count=total.length;
});

しかし、対応するテキストフィールドで「カウント」を取得する方法がわかりません。どんな助けでも大歓迎です！

PS私は異なるクラスに異なるチェックボックスとテキストフィールドを持っているので、それらがクラスによって参照されることが重要です。

4

3 に答える 3

2

おそらくこのような小さなもの：

$(':button').click(function() {
    var total= $('.check:checked'),
        count=total.length;

    $('.text').val(function() {
       return $('#' + this.id.replace(/tf/,'cb')).is(':checked') ? count : 0;
    });
});

クラスを持つ各要素は、対応するチェックボックスがチェックされているかどうかに応じて、またはtextいずれかの値を持つように更新されます。明らかに、必要に応じて、（空の文字列）に置き換えることで、チェックされていないチェックボックスに対応するフィールドを空白にすることができます。count00''

.val()（関数をメソッドに渡す方法の詳細については、ドキュメントを参照してください。）

var常に変数を宣言するか、グローバルを作成する必要があることに注意してください。

作業デモ： http： //jsfiddle.net/aBSNy/

于 2012-05-22T02:13:10.893 に答える
2

あなたはこのようにそれを行うことができます：

HTML：

<div>
    <input type="checkbox" name="check1" value="" />
    <input type="text" name="text1" value="" data-count-for="check1" />
</div>
...(other checkboxes)...
<div>
    <input id="trigger" name="trigger" type="button" value="Click me" />
</div>​

JavaScript（jQuery 1.7以降を使用）：

jQuery("#trigger").on('click', function(event){
    event.preventDefault();
    // select checkboxes:
    var checkboxes = jQuery(':checkbox:checked');
    checkboxes.each(function(){
        // find text input assigned to each checked checkbox:
        var selector = '[data-count-for="' + jQuery(this).attr('name') + '"]';
        // assign it a total number of previously found checkboxes
        jQuery(selector).val(checkboxes.length);
    });
});​

ここで証明を参照してください：http：//jsfiddle.net/EMhuw/1/

于 2012-05-22T02:13:46.180 に答える
1

textareaと対応するチェックボックスのIDと名前が一致していることを確認してください。そうすれば、それらを簡単にバインドして、チェックされたチェックボックスのコレクションをループし、チェックボックスのname属性をidtextareaのとして使用できます。

JavaScript：

// your already-computed total
count = total.length;

// loop through the collection of checked checkboxes
$('.check:checked').each( function() {

    // assign the total to each textarea where the id matches a checkbox name attr
    $('#'+$(this).attr("name")).val(total);

});

HTML：

<input class="check" type="checkbox" name="check1" />
<input class="check" type="checkbox" name="check2" />
<input class="check" type="checkbox" name="check3" />
<input class="check" type="checkbox" name="check4" />
<input class="check" type="checkbox" name="check5" />

<textarea id="check1"></textarea>
<textarea id="check2"></textarea>
<textarea id="check3"></textarea>
<textarea id="check4"></textarea>
<textarea id="check5"></textarea>

一致する列挙されたID/名前を使用すると、ループ構造を使用して、サーバー側でより多くのチェックボックスとテキスト領域を生成する方が簡単であることがわかります。したがって、これは5つの要素よりもはるかに多くの要素に拡張できます。

于 2012-05-22T02:09:46.523 に答える