2009-08-14 14 views
3

をして(?親の)次の入力を見つけること、そしてあなたがそれをクリックすると、それは...そうのように応じて背景色を変更します私は、テーブル内のチェックボックスを持っているjQueryの

$("#table tr td :checkbox").bind("click change", function() { 
    $this = $(this); // cache the jquery object 
    if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); } 
    else { $this.closest('tr').css('background-color', '#fff'); } 
}); 

これはうまくいきますが、私は1つ上に行きたいと思っていました。テーブルの行のどこでもクリックすると、ボックスがチェックされ、行が強調表示されます。

私はこのコードを使用してみましたが、それは、残念ながら動作しません:

$("table tr").bind("click", function() { 
    $(this).parents("tr").find(":checkbox").attr('checked'); 
}); 

そしてここでは、HTMLコード(読みやすさを向上させるために取り除か過度なもの...

<td>Name</td> 
<td>Description</td> 
<td><input type="checkbox"></td> 

は、任意のヘルプしまうのです非常に高く評価すること、ありがとう

答えて

2

あなたの取り扱いはtrクリックです。 親がテーブルなので、助けにはなりません。このコンテキストからfind()を使用するだけです。

複数のイベントハンドラが実行されないようにするには、.liveを使用します。

行に1つのチェックボックスしかないと仮定すると、以下を使用します。 あなたはそれが

$("table>tbody>tr").live("click", function(ev) { 
     var $checkbox = $(this).find(":checkbox"); 
     //check to see we have not just clicked the actual checkbox 
     if (!$(ev.target).is(':checkbox')){ 
      $checkbox.is(':checked') ? $checkbox.removeAttr('checked') 
            : $checkbox.attr('checked', 'checked') 
     } 
}); 
+0

+1は '.parents( 'tr')'が必要でないことに注意してください。 – MitMaro

+0

これは素晴らしいです、多くのおかげさまです - とにかく、それが既にチェックされているかどうかを調べるために考えましたか? – Nick

+0

はい($(this).find( ":checkbox")。is( ':checked')) – redsquare

2

あなたはこれを変更したい!

これに

$(this).parents("tr").find(":checkbox").attr('checked', 'checked'); 

そうでない場合は、あなたがやっているすべては、それを設定していない、checked属性を読んです。

+0

非常によくbtwが見つかりました。説明に感謝します。 – Nick

1

ような何かをしようと切り替えたい場合は、私はあなただけ忘れていると思う

$("table>tbody>tr").live("click", function() { 
    $(this).find(":checkbox").attr('checked', 'checked'); 
}); 

UPDATE

(それはthead要素の行でこれを実行しないようにTBODY内のtrのを使用しています注意してください)属性の値を設定します。

$("table tr").bind("click", function() { 
    $(this).find(":checkbox").attr('checked', 'checked'); 
}); 

jQuery Docs on Attributesが参考になる場合があります。


クレジット.parent("tr")が必要とされていないことに気づいためredsquareへ。

+0

これはtrです、親( 'tr')は何も一致しません。 – redsquare

+0

私はなぜあなたを賞賛したのですか? ;) – MitMaro

+0

多くのありがとう、赤! – Nick

関連する問題