jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにしようと以下のコードを書きましたがどれか一つ押したら全部が押されうまく動きません

どうすればいいのでしょうか?
http://jsfiddle.net/gmb65/11/

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/10/19 13:48:05
  • 終了:2014/10/26 13:50:03

回答(1件)

id:khazad-Lefty No.1

khazad-Lefty回答回数181ベストアンサー獲得回数272014/10/19 17:03:30

ポイント500pt

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

他5件のコメントを見る
id:takanii

あ!できました
もしかしてこういうことですか?
http://jsfiddle.net/gmb65/21/

2014/10/19 18:45:53
id:takanii

ありがとうございます!

2014/10/19 18:48:33

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません