Манипуляции с детьми для проверки флажка в строке таблицы

Question

$("tr.clickable").each(function() {$(this).click(function() {
            $(this).children("td:first > input").is(":checked") ?
                    $(this).children("td:first > input").removeAttr("checked") :
                    $(this).children("td:first > input").attr("checked","checked");
        })});

это проверяет только первую строку в моей таблице (независимо от того, на какую строку я нажимаю). Как я могу применить его, чтобы он проверял ввод в конкретной строке, по которой я щелкаю?

HTML:

    <tbody style="height: 500px; overflow-x: hidden; overflow-y: scroll;">
                                                <tr id="row0" class="alternate clickable">
                        <td>                            <img width="11" height="11" title="This email failed to send." alt="Failed" src="images/error_warning.png">
                                                    <br>
                            <input type="checkbox" value="6751" name="emailCheck[]" class="emailCheck"></td>
                        <td><a href="user_settings.php?id=349">
                            wmiller                 </a></td>
                        <td>New Fin-iQ Message</td>
                        <td><span class="errorText">UNKNOWN</span></td>
                        <td>New Bulletin Notification</td>
                        <td>Jun. 07/10 10:14:39 am</td>
                        <td><a href="emails_report.php?action=re&amp;id=6751">Resend</a>
                            <br>
                            <a id="emailBodyToggle_6751" href="javascript:showEmail(6751)">Show</a>
                        </td>
                    </tr>
<tr id="emailBody_6751" style="display: none; text-align: left;" class="alternate">
                    <td colspan="7"><div>...</div></td>
                </tr>
                                                <tr id="row1" class=" clickable">
                    <td>                            <img width="11" height="11" title="This email failed to send." alt="Failed" src="images/error_warning.png">
                                                <br>
                        <input type="checkbox" value="6752" name="emailCheck[]" class="emailCheck"></td>
                    <td><a href="user_settings.php?id=350">
                        mholman                 </a></td>
                    <td>New Fin-iQ Message</td>
                    <td><span class="errorText">UNKNOWN</span></td>
                    <td>New Bulletin Notification</td>
                    <td>Jun. 07/10 10:14:39 am</td>
                    <td><a href="emails_report.php?action=re&amp;id=6752">Resend</a>
                        <br>
                        <a id="emailBodyToggle_6752" href="javascript:showEmail(6752)">Show</a>
                    </td>
                </tr>

                <tr id="emailBody_6752" style="display: none; text-align: left;" class="">
                    <td colspan="7"><div>...</div></td>
                </tr>

Answer 1

Попробуйте удалить вызов .each () на вашем первом селекторе. jQuery использует «подразумеваемую итерацию», что означает, что вы можете делать такие вещи:

$('tr.clickable').click(function () { // Do things here. });

В результате вы должны получить функцию щелчка в каждой строке.

После того, как я возился с вашим постом на скрипке, я получаю следующее:

$("tr.clickable").click(function() {
    $(this).find("td:first input").is(":checked") ? $(this).find("td:first input").removeAttr("checked") : $(this).find("td:first input").attr("checked","checked");
});

Answer 2

Вы можете переключать свой код следующим образом:

$("tr.clickable").click(function() {
    var cb = $("td:first > input", this)[0];
    cb.checked = !cb.checked;
});​

Вы можете посмотреть демо здесь .

Это чище / быстрее и по-прежнему совместимо с различными браузерами с использованием основного подхода JavaScript и атрибута .checked DOM , только с использованием jQuery для селекторов.

Примечание сайта: При привязке обработчика, подобного .click(), нет необходимости в .each(), просто вызовите .click() напрямую и функцию Передаваемый вами / handler будет привязан к каждому сопоставленному элементу.