jQueryのチェックボックス

Question

私の現在のコード：

<script type="text/javascript"> 
    function checkAll(checked) { 
     $("input[type='checkbox']:not([disabled='disabled'])").attr('checked', checked); 
    } 
</script> 
<input type="checkbox" id="cbxSelectAll" onclick="checkAll(this.checked);" /> 

ショートバージョン：私は、テーブル内のすべてのチェックボックスをチェックするための関数呼び出しと、上記の方法を変更するにはどうすればよい

checxboxフォーム要素を含む。

ロングバージョン：

私はdeleteオプションを持っているとしているasp.netでのグリッドビューを含むWebUserControlを作成しています。私は削除を一連のチェックボックスにして、ヘッダー内のボックスを1つ選択してそのすべてを選択したいと思います。これはASP.NET以外の人にとっては、ヘッダー行にチェックボックスがあり、すべての行にもchecxboxがあるテーブルです。

私は上記のコードを使用してページ全体のすべてのボックスを確認しました。しかし、ここではうまくいかないでしょう。なぜなら、私は一度にそれぞれ独立して動作するページ上にこれらの複数のものを置いて欲しいからです。テーブルを識別するためにセレクタを使用すると、すべてのボックスを選択できますが、テーブルに一意の名前を付けてスクリプトブロックにその名前を付けるには、何らかのコーディングが必要になります。

本当に私が望むのは、上記のスクリプトを変更して、「すべて選択」ボックスのテーブルにあるすべてのチェックボックスをオンにすることです。チェックボックスを含むテーブルは他のものの中に入れ子にすることができますが、その中にネストされているものは見当たりません。ネストされたテーブルにchecxboxesも含まれていれば、選択されても気にしません。

ありがとうございました。

Answer 1

まず、HTMLとJavascriptを混在させないでください。代わりにイベントハンドラバインディングを使用してください。

第二に、特定のタイプの最も近い祖先要素を取得するためにclosestを使用します。

$(document).ready(function(){ 
    $('#cbxSelectAll').click(function() { 
     $(this) 
      .closest('table') // get the parent table element 
      .find("input:checkbox:enabled") // find children that match the selector 
      .attr('checked', this.checked); // set their checked value 
    }); 
}); 

Answer 2

いくつかのネストされたがあるかもしれない場合は、.closest

function checkAll(checked) { 
    var $table = $(this).closest('table'); 
    $table.find("input[type='checkbox']:not([disabled='disabled'])") 
      .attr('checked', checked); 
} 

を使用して、すべての選択を含むテーブルを見つけることができますテーブルでは、クラスで必要なものを指定するのが最も簡単です（例： $(this).closest('table.tableOfCheckboxes');ここで、検索するテーブルにtableOfCheckboxesクラスを追加します。

Answer 3

はこれにあなたのインライン属性を変更し

：

<input type="checkbox" id="cbxSelectAll" onclick="checkAll.call(this);" /> 

そして、これまでごcheckAll()：

function checkAll() { 
    $(this).closest('table').find("input:checkbox:enabled").attr('checked', this.checked); 
} 

を.call()を使用して、それがクリックされた要素のコンテキストから呼び出されます。

次に、jQueryはclosest()^(docs)<table>を取得し、checkbox-selector^(docs)とenabled-selector^(docs)を使用して入力を探します。

attr()^(docs)メソッドを使用する場合は、this.checkedを使用して、チェックボックスをチェックして現在の状態にすることができます。