Поиск следующего ввода (родителей?) с j-Квери

У меня есть флажок внутри стола, и когда вы нажмете на него, он будет менять цвет фона соответственно, как это ...

$("#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'); }
});

Это работает просто отлично, однако, я понял, я хотел бы пойти один лучше, так что в любом месте на столе строки вы нажмете, он будет проверять поле и выделить строку.

Я пытался использовать этот код, но он не работает, к сожалению:

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

А вот HTML код (удалены чрезмерные вещи для улучшения читаемости ...

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

Любая помощь будет очень признателен, спасибо!

Ответ на: "Поиск следующего ввода (родителей?) с j-Квери"

Количество ответов:3

Вы хотите изменить это:

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

к этому:

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

В противном случае все, что вы делаете, это чтение атрибут checked attribute, not setting it. атрибут, не устанавливая его.

Родитель таблицы, так что не поможет. Все, что вам нужно сделать, это использовать найти () из этого контекста.

Я хотел бы использовать .live, чтобы избежать нескольких обработчиков событий, когда один будет делать.

Предполагая, что у вас есть только один флажок в строке, то используйте следующее.(Обратите внимание, что он использует tr внутри tbody, чтобы избежать запуска этого на thead строки)

$("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')
        }
 });

Событие вашей обработки является tr нажмите кнопку.

Я думаю, вы просто забыли установить значение атрибута.

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

jQuery Docs on Attributes might be of some assistance. может оказать некоторую помощь.


Кредит на redsquare для замечая, что .parent("tr") is not needed. не нужен.