5

次のようなチェックボックスのあるテーブルがあります。

<td class="table-col" >
  <div class="group-one" >
    <input type="checkbox"  />
  </div>
</td>

私がやりたいのは、チェックボックスをオンにして「選択した」クラスを「table-col」に適用することです。

if ($('.table-col').find(':checked')) {
    $(this).parent().parent().addClass('selected');
}

上記のような同様の解決策で多くの投稿を見ましたが、うまくいかないようです。理由はわかりませんが、これは要素ではなく HTMLDocument を指しています。

(編集) このページには、「選択済み」に適用したいチェックボックスがマークされます。コメントで @cimmanon がイベント処理について言及しました。これを調べる必要があります。答えもありがとう！

（編集）

<td class="table-col">
<div class="group-one">
    <input type="checkbox" checked="checked"/>
</div>
</td>

そのため、ページの読み込み後、チェックボックスがマークされたボックスが表示されます (常にchecked="checked"が含まれていると思います-確かではありません)。これらは、新しいスタイルを必要とするものです。それらをクリックしてスタイルを適用するという相互作用は必要ありませんが、それでも非常にクールです.

4

4 に答える 4

8

これを試して...

$(":checkbox").on('click', function(){
     $(this).parent().toggleClass("checked");
});

例

ご挨拶。

于 2013-01-22T21:22:54.110 に答える
3

イベント.change()にバインドするために使用できます。change次に、.closest()andを使用して、祖父母要素からクラス.toggleClass()名を追加または削除します。selected

$("input:checkbox").change(function(){
  $(this).closest(".table-col").toggleClass('selected', this.checked);
});

こちらをご覧ください。

于 2013-01-22T21:25:56.897 に答える
0

チェックボックスに名前を付けて、jQuery がフックできるようにします。

$('input[name=foo]').is(':checked')
于 2013-01-22T21:23:14.263 に答える
0

$(this) は、@cimmanon が示唆したように、チェックボックス要素に割り当てて呼び出されたイベント ハンドラーにいる場合にのみ、チェックボックスを参照します (コードに従って祖父母に移動できるようにするため)。

したがって、チェックボックスに .change() ハンドラーを割り当てた場合、 $(this) はチェックボックスを参照します。おそらく「選択された」クラスのオンとオフを切り替えたいので、実際にはこれを 1 行で行うことができます。 

    $(":checkbox").change(function () {
    $(this).parent().parent().toggleClass('selected');
         });

それ以外の場合、$(this) はイベントを発生させたコントロールを参照します。たとえば、ボタン クリック ハンドラーに応答してこのコードを実行している場合、$(this) はボタンを参照します。

于 2013-01-22T21:38:58.053 に答える