1

チェックされたチェックボックスを検査するための単純な各ループを考えてみましょう。

$(':checkbox').filter(':checked').each(function(){
    var name = $(this).val();
});

このコードは、元のHTMLコードでチェックされたチェックボックスに対して次のように機能します。

<input type="checkbox" name="test" value="test" checked="checked" />

このjQueryコードをライブで機能させるfilter方法、新しいボックスがチェックされるかチェックが削除されるたびにプロセスを実行する方法。チェックボックスが変更されたときに（チェックされているかチェックされていないか）各ループを実行して、現在チェックされている値の更新された値を返します。

注：これは、問題を表現するための簡略化されたコードです。目的は、を記録することではなく、ループ内nameでチェックされた値を処理することです。each

4

5 に答える 5

2

使用click：

$(':checkbox').click(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = this.value;
    });
});

ノート：

  • DOMに何度もクエリを実行することは避けられます。
  • :checkboxこれはcssセレクターではなく、jQuery拡張機能であるため、非常に遅いセレクターです。
  • this値を取得するためにjQueryを使用しないでください。

次のようにコードを改善できます。

var $checkboxes = $('input[type="checkbox"]');
$checkboxes.filter(':checked').each(function() {
    var name = this.value;
});

読書リソース：

于 2012-05-20T01:16:28.020 に答える
1

changeチェックボックスのイベントにループをバインドする必要があります。

$(':checkbox').change(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = $(this).val();
    });
});
于 2012-05-20T01:09:35.867 に答える
1

ループを実行しているので、チェックボックスがたくさんあると思います。nameただし、毎回変数を上書きして、最後のチェックボックスの値だけを残すのはなぜか、少し混乱しています。代わりに、チェックしたすべての値を次の場所にプッシュする配列を提供しています。

// Declare a names variable for storing values
var names;

// Any time a checkbox changes on our form
$("form").on("change", ":checkbox", function(e){
  // Empty the names array
  names = [];
  // Get all checked checkboxes from our form and add their value to our array
  $(":checkbox:checked", e.delegateTarget).each(function(){
    names.push( $(this).val() ); 
  });
}).find("input:checkbox").trigger("change");

// Method of revealing what we currently have checked
$("#reveal").on("click", function(){
  alert( names.join(", ") );
});

デモ： http： //jsbin.com/uyecux/2/edit

于 2012-05-20T01:29:24.237 に答える
0

イベントハンドラーを作成する必要があります。jQueryでは、これは次のようになります。

$(':checkbox').on('change', function() {
  // Execute your code here.
});

jQueryでのイベント処理の詳細については、jQueryのドキュメント（http://api.jquery.com/on/ ）を参照してください。

于 2012-05-20T01:10:48.780 に答える
0 
var $checkboxes = $('input[type=checkbox]')  
$checkboxes.click(function (){  
    $(':checkbox').filter(':checked').each(function(){
        var name = $(this).val();
    });
});

上記の機能を使ってみてください。

于 2012-05-20T01:13:20.997 に答える