人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにしようと以下のコードを書きましたがどれか一つ押したら全部が押されうまく動きません
どうすればいいのでしょうか?
http://jsfiddle.net/gmb65/11/

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● khazad-Lefty
●500ポイント

jQueryは条件に当てはまるもの全てに対して適用されます。
tdのclickで

$(this).children('td').children('input[type=checkbox]')

は、「配下の(すべての)tdの配下の(すべての)チェックボックス」というあつかいになるので、

<tr><td>1回</td>
 <td>1問</td>
 <td>赤いのはどれか<BR>
 <input type="checkbox">a りんご<BR>
 <input type="checkbox">b みかん<BR>
 </td>
</tr>

だと、チェックボックスすべてが対象になります。

じゃあどうすればいいかというと、一例として、クリックの適用範囲をspanでくくって、その配下のみで処理を完結させるとかがあるかと。

<tr><td>1回</td>
 <td>1問</td>
 <td>赤いのはどれか<BR>
 <span class="checkItem" ><input type="checkbox">a りんご</span><BR>
 <span class="checkItem" ><input type="checkbox">b みかん>/span><BR>
 </td>
</tr>

で、

$('span .checkItem').click(function() {
 var c = $(this)..children('input[type=checkbox]');
 if(c.prop('checked'))
 c.prop('checked', '');
 else
 c.prop('checked', 'checked');
}); 

とか。

とはいえ、jQueryを使うこと自体が目的ではないのなら、
単純にHTMLのLabelを使ったほうがいろいろ楽じゃないかとおもいます。
ラベル <LABEL> - HTMLタグリファレンス/Tips


Lhankor_Mhyさんのコメント
余談ですが、iPhoneのSafari、Label効かないんですよね。スマホ対応にするにはどの道スクリプトを書かないといけない…… http://qiita.com/ituki_b/items/8a0cd4fc5021faca7210

takaniiさんのコメント
labelだとチェックボックス全てにid を振らないといけないので大変だったのでjqueryを検討していました

Lhankor_Mhyさんのコメント
連続で横から失礼します。 最近のブラウザなら、labelタグはネストしておけば、idとかname属性いらないですよ。

takaniiさんのコメント
すみません ネストについて 詳細を教えていただけないでしょうか?

Lhankor_Mhyさんのコメント
<label><input type="checkbox"/>テスト</label> >|html| <label><input type="checkbox"/>テスト</label> ||< これでラベルをクリックしても反応すると思います。 ただし、iOSのSafariは先に書いたとおりです。

takaniiさんのコメント
あ!できました もしかしてこういうことですか? http://jsfiddle.net/gmb65/21/

takaniiさんのコメント
ありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ