JQuery 2つのテーブルで2つの 'すべて選択'チェックボックス

Question

複数のチェックボックスがあります（この番号は前の画面で定義された検索プロファイルに基づいて可変です）。私は、次の各表の上部にある[すべて選択]チェックボックスを実装しました：

$('#select_all').bind('click', function() { 
    if(this.checked) { 
     $(':checkbox').each(function() { 
      this.checked = true; 
     }); 
    } else { 
     $(':checkbox').each(function() { 
      this.checked = false; 
     }); 
    } 
}); 

しかし、（悪い行うには書かれているように）この関数は、両方のテーブルのすべてのチェックボックスを選択します。各個別テーブルのすべてのチェックボックスを選択する簡単な方法はありますか？

ありがとうございました。そのようなテーブルの代わりに、idの別のテーブルまたは使用のためのクラス

Answer 1

。 IDを使用する必要はなく、それぞれに異なるクリック機能を使用することもできます。あなたはおそらく両方にバインドされた単一のクリック機能を持つことができ、右のセレクタを使いますが、あなたのhtmlを見ることなく知るのは難しいでしょう。

あなたのhtmlを投稿する場合は、それが簡単にあなたを助けるためになりますが、あなたは、次のようなものが必要です。私たちは、あまりにもHTMLを必要と

$('#select_all1').bind('click', function() { 
 
    var checkedState = this.checked; 
 
    $('#table1 :checkbox').each(function() { 
 
     this.checked = checkedState; 
 
    }); 
 
}); 
 

 
$('#select_all2').bind('click', function() { 
 
    var checkedState = this.checked; 
 
    $('#table2 :checkbox').each(function() { 
 
     this.checked = checkedState; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="select_all1"></input> 
 
<table id="table1"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<input type="checkbox" id="select_all2"></input> 
 
<table id="table2"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

使用異なるID：

あなたのCSSがより選択的にする必要があり

$('.select_all').bind('click', function() { 
if(this.checked) { 
    $(':checkbox').each(function() { 
     this.checked = true; 
    }); 
} else { 
    $(':checkbox').each(function() { 
     this.checked = false; 
    }); 
} 
});