0

テーブルを持っている

<table>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c2"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
  <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr>
...
</table>

そして、jsは次のとおりです。

$('input:checkbox[name*=tableRow]').click(function(event) {

    var el = $(this);
    if (el.attr('checked')) {
        el.parents('tr').css("background-color", '#ffcccc');
    }
    else {
        el.parents('tr').css("background-color", 'inherit');
    }
    event.stopPropagation();
});

$('input:checkbox[name*=tableRow]').parents('tr').click(function() {
    var el = $(this).find('> td:eq(0) > :checkbox');
    el.click();
});​

チェックボックスは両方の方法でチェックとチェックを外しますが、「tr」をクリックすると、チェックセットの前にイベントが実行されたように見えます。

必要性：両方のckecksでcssを設定します

4

2 に答える 2

0

これに変更します：

$('input:checkbox[name*=tableRow]').change(function(event) { ... });

そして、el.attr('checked')使用する代わりにel.is(':checked');

このデモを参照してくださいhttp://jsfiddle.net/S9L7C/

于 2012-10-16T10:05:36.020 に答える
0

これが実際の例です： jsFiddle

よりW3Cに適したコードを取得するには、属性'for'のラベルタグを使用する必要があることに注意してください。

 $('input:checkbox[name*=tableRow]').click(function (event) {

            var el = $(this);
             test(el);    
     }); 

    $('input:checkbox[name*=tableRow]').parents('tr').click(function () {
        var el = $(this).find(':checkbox');
        el.attr('checked', !el.attr('checked'));
        test(el);
    });

function test(el){
       if (el.is(':checked')) {
                el.parents('tr').css("background-color", '#ffcccc');
            }
            else {
                el.parents('tr').css("background-color", 'inherit');
            }
            event.stopPropagation();

}
于 2012-10-16T10:33:53.387 に答える