views:

175

answers:

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

this only checks the first row in my table (no matter which row i click on). how can i apply it so that it checks the input on the specific row i click on? thanks!

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>
+3  A: 

Try removing the call to .each() on your first selector. jQuery uses "implied iteration" which means you can do things like this:

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

You should end up with a click function on each row that way.

After messing with your post on fiddle I get this to work:

$("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");
});
g.d.d.c
Great point.. Knew something didn't look 'right' with that code but couldn't put my finger on it. +1
KP
i tried that before :( that's why i put each around it because it looked like it was only hitting the first element
gsquare567
This is a separate scoping issue that doesn't solve the content problem: http://jsfiddle.net/mH7NE/ While this is correct, it doesn't solve the problem :)
Nick Craver
are you saying there's something wrong with jquery? very cool site, btw (jsfiddle)
gsquare567
There may be. The original code sample seemed like it was correct to me as well. I'm in the habit of avoiding the `>` addition to selectors most of the time (I find it's not usually required for what I'm attempting to accomplish) but I don't think it's presence accounts for the differences between `.find()` and `.children()` in this instance.
g.d.d.c
A: 

You can switch your code around like this:

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

You can view a demo on it here.

This is cleaner/faster and still cross-browser compliant using the core JavaScript approach and the .checked DOM attribute, only using jQuery for selectors.

Site note: When binding a handler like .click() there's no need for a .each(), just call .click() directly and the function/handler you pass in will be bound to each matched element.

Nick Craver
i had high hopes but still a nogo. edited main post with more html if it helps =S
gsquare567
@gsquare567: Updated the demo with your new markup, give it a go :)
Nick Craver