通过孩子操纵检查表格中的复选框

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

尝试删除调用。每个（）在您的第一选择。 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; 
});​ 

You can view a demo on it here。

使用核心JavaScript方法和.checked DOM attribute，这是更清洁/更快，仍然跨浏览器兼容，只使用jQuery的选择器。

网站注：当绑定像.click()的处理程序没有必要对.each()，只需拨打.click()直接和功能/句柄传递将被绑定到每一个匹配元素。