0

これは、タイトルが示すほど単純ではないかもしれません。

クラスを介して自家製のチェックボックスとしてdivを設定しています（背景画像として適用されるチェック記号としての1pxの境界線、16pxの正方形、カスタムグラフィック）。クリックすると、「checked」クラスが適用されます。十分に単純です。例 (チェックなし):<div class="checkbox group1">&nbsp;</div>

同じグループ (この例では group1) 内の他のすべてのチェックボックスを選択するための「マスター」である別のチェックボックス (div) もあります。このマスターには、「check_all」という特別なクラスがあります。<div class="checkbox check_all group1">&nbsp;</div>

「単純です。'check_all' がチェックされている場合は、group1 のすべてのボックスをチェックするだけです。」それほど簡単ではありません。check_all は Web サイト全体で共通のクラスであるため、他のページで再利用できます。また、同じページの group2、group3 などに適用することもできます。同じグループ内のみをすべてチェックするには、jQuery関数が必要です。さらに複雑なことに、グループ名は連続しておらず、関連性もありません。それらは「invoices」または「cart_items」または「addresses」である可能性があります。

私が考えたこと：

1) 'checked'、'checkbox'、および 'check_all' のすべての出現のマスターのクラス属性をクレンジングし、残りの文字列をグループ名として使用します。問題: 子チェックボックスに適用されるクラス以外にも、より多くのクラスが存在する可能性があります。

2) グループ名「check_all_group1」に「check_all_」を追加します。問題: jQuery hasclass は、最初にハンドラー関数をアタッチするために「begins with」を実行するためのワイルドカードをサポートしていないようです。その場合でも、クラスを処理し、文字列関数を実行して「group1」に到達する必要があります。不格好で理想的ではないようです。

3) マスター div とすべての子 div を親コンテナーに配置します。これは私が思いついた最も近い解決策ですが、他のグループに属する他のチェックボックスもコンテナーに含まれないことを保証することはできません。

コンセプト全体の再設計は大歓迎です。同じグループを持つ他のすべての「チェックボックス」要素を選択する関数に関連付けられている再利用可能なクラスにドロップする簡単な方法が必要です。

編集 : このサイトの訪問者は世界中にいて、最新のテクノロジを持っていない可能性があるため、ソリューションはクロスブラウザーでサポートされている必要があります (IE 6.5 まで)。実際、既存のサイトを最近分析したところ、訪問者の 10% が 3 年以上前のブラウザーを使用していることが明らかになりました。グローバルに考えてください。

コード例

<table>
  <tr>
    <td><div class="checkbox check_all delete">&nbsp;</div>Delete</td>
    <td><div class="checkbox check_all mark">Mark</div></td>
  </tr>
  <tr>
    <td><div class="checkbox delete">&nbsp;</div></td>
    <td><div class="checkbox mark">&nbsp;</div></td>
    <td>Line 1</td>
  </tr>
  <tr>
    <td><div class="checkbox delete">&nbsp;</div></td>
    <td><div class="checkbox mark">&nbsp;</div></td>
    <td>Line 2</td>
  </tr>
</table>
4

2 に答える 2

0

次のようなことはどうですか：

<input type="checkbox" data-group-selector="my_group_name" class="check_all">

...

<input type="checkbox" class="my_group_name">

それから...

$('.check_all').on('click', function (e) {
  var group = $(this).data('group-selector');
  $('.' + group).prop('checked');
});

また

<input type="checkbox" id="select_all_my_group_name" class="check_all">

...

<input type="checkbox" class="my_group_name">

それから...

$('.check_all').on('click', function (e) {
  var group = $(this).attr('id').replace('select_all_', '');
  $('.' + group).prop('checked');
});
于 2013-05-30T04:51:52.413 に答える