3

テーブルの中にチェックボックスがあり、それをクリックすると、それに応じて背景色が次のように変更されます...

$("#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>

どんな助けでも大歓迎です、ありがとう！

4

3 に答える 3

2

これを変更したい：

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

これに：

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

それ以外の場合は、属性を設定するのではなく、属性を読み取るだけです。checked

于 2009-08-14T13:01:25.943 に答える
2

処理するイベントはtrクリックです。親はテーブルなので、役に立ちません。このコンテキストからfind（）を使用するだけです。

.liveを使用して、複数のイベントハンドラーを回避します。

行にチェックボックスが1つしかない場合は、次を使用します。（これをaad行で実行しないように、tbody内でtrを使用することに注意してください）

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

アップデート

切り替えたい場合は、次のようなものを試してください

$("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')
        }
 });
于 2009-08-14T13:01:43.370 に答える
1

属性の値を設定するのを忘れているだけだと思います。

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

属性に関するjQueryドキュメントが役立つ場合があります。

が不要であることに気付いたredsquareの功績.parent("tr")。

于 2009-08-14T13:02:34.367 に答える