jQuery選擇器只選擇最後一個複選框列，但應選擇所有複選框？

我試圖突出顯示整個行，當用戶檢查<table>內的任何複選框。我正在使用jQuery的「dataTable」插件。jQuery選擇器只選擇最後一個複選框列，但應選擇所有複選框？

我能夠以我想要的方式獲得部分工作。目前最右邊或最後一個有「複選框」的列會將選擇器應用於它。所以，當我檢查一個盒子（「th」中的check_all框或「td」中的複選框時，它會正確地突出顯示該行，但如果我檢查第二到最後一列中的任何複選框，則不會有任何反應。選擇並沒有得到此適用

我不明白這有什麼錯我的jQuery

這裏是我的jQuery：。

//SELECTED ROW HIGHLIGHT 
$("table.datatable_ss").delegate("input:checkbox", "click", function(e) { 
    //Search the body for any checked input boxes and highlight the row 
    $("table.datatable_ss tbody [type=checkbox]").each(function(){ 
      if ($(this).is(":checked")) { 
       $(this).closest("tr").addClass("row_selected"); 
      } 
      else { 
       $(this).closest("tr").removeClass("row_selected"); 
      } 
    }); 
});

繼承人的HTML：

<table class="datatable_ss"> 
    <thead> 
     <tr> 
     <th>Suite</th> 
     <th>Location</th> 
     <th>Status</th> 
     <th>Date</th> 
     <th><input type="checkbox" name="_arch_chbx_checkall"></th> 
     <th><input type="checkbox" name="_del_chbx_checkall" ></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td class=" sorting_1">Suite 301</td> 
      <td>Mainstreet Plaza</td> 
      <td>Active</td> 
      <td>06/01/2012</td> 
      <td> 
       <input type="checkbox" class="input_editible" name="_arch_chbx" id="9_L_arch_chbx"> 
      </td> 
      <td> 
       <input type="checkbox" class="input_editible" name="_delete_chbx" id="9_L_del_chbx"> 
      </td> 
     </tr> 
    </tbody> 
</table>

來源

2012-03-07 Ronedog

你的HTML似乎是錯誤的幾個地方。 ''應該有表格行，''，在其下面應該有標題，''，在下面。此外你沒有關閉''。 ''標籤類似於'FYI'的''標籤。 – 2012-03-07 16:30:08

對不起，我只是輸入了錯誤的...實際的代碼是正確的。我現在修好了。 – Ronedog 2012-03-07 16:32:38

在選擇器中使用tbody .. 複選框被忽略！在js代碼 – ggzone 2012-03-07 16:38:05

我通過刪除複選框的循環來突出顯示。我認爲最好將select-all複選框事件連線和row-checkbox事件連線分開。

// this will wire up the click for each individual row 
$("table.datatable_ss tbody").delegate("input:checkbox", "click", function(e) { 

    //Search the body for any checked input boxes and highlight the row 
    //$("table.datatable_ss tbody [type=checkbox]").each(function(){ 
      if ($(this).is(":checked")) 
      { 
       $(this).closest("tr").addClass("row_selected");     
      } 
      else 
      { 
       $(this).closest("tr").removeClass("row_selected"); 
      } 
    //}); 
});

來源

2012-03-07 16:59:53

第6行很棒..感謝我改變了代碼。現在我唯一需要的是，如果行檢查位於中的「check_all」複選框，那麼行將被突出顯示......我想這就是爲什麼我使用.each（），但.each（）引起的我原來的問題......任何想法？感謝您的回覆 – Ronedog 2012-03-07 17:06:59

當您有多個選中的項目時，此代碼不會工作，如果您取消選中它將刪除「row_selected」類。即，您仍然檢查了行內的項目 – Tuscan 2012-03-07 17:10:05

是的，「each（）」將貫穿所有複選框。如果你想突出顯示一行，如果任何一個複選框被選中，你可以從「if」條件中「返回false」來突破each（）循環。 – 2012-03-07 17:10:46

爲什麼你使用foreach這是什麼導致問題。

試試這個。

$("table.datatable_ss").delegate("input:checkbox", "click", function (e) { 
      if ($(this).closest("tr").find("input:checkbox:checked").length > 0) { 
       $(this).closest("tr").addClass("row_selected"); 
      } 
      else { 
       $(this).closest("tr").removeClass("row_selected"); 
      } 
});

來源

2012-03-07 17:08:21 Tuscan

這有效，但不適用於多個複選框...即參見ulhas Tuscano上面的註釋。它也不會「檢查所有」並突出顯示行......但它的確幫助我思考問題，以提出解決方案。見下面我的回覆。 – Ronedog 2012-03-07 17:29:44

感謝您的回覆。它幫助我找出了適用於所有情況的解決方案：

我最終爲「thead」輸入框設置了一個單獨的選擇框，如果該行中的某個複選框恰好被檢查，那麼這些選框將突出顯示所有行。

另一個選擇器用於「tbody」複選框，並遍歷到「tr」，然後使用.find（）允許我檢查是否有複選框被選中，如果是，該行保持高亮顯示。

感謝所有那些幫助我引發新的思考方式。

繼承人的更新的jQuery：

//SELECTED ROW HIGHLIGHT for the THEAD "select all" checkboxes 
         $("'.$selector.' thead input:checkbox").click(function(e) { 

          var xRow = $("'.$selector.' tbody tr"); 

          //Search the body for any checked input boxes and highlight the row 
          if (xRow.find("input").is(":checked")) //find all checkboxes 
          { 
           xRow.addClass("row_selected"); 
          } 
          else 
          { 
           xRow.removeClass("row_selected"); 
          } 

         }); 

         //SELECTED ROW HIGHLIGHT 
         $("'.$selector.'").delegate("input:checkbox", "click", function(e) { 

          //Search the body for any checked input boxes and highlight the row 
          if ($(this).closest("tr").find("input").is(":checked")) //find all checkboxes 
          { 
           $(this).closest("tr").addClass("row_selected"); 
          } 
          else 
          { 
           $(this).closest("tr").removeClass("row_selected"); 
          } 

         });

來源

2012-03-07 17:33:43 Ronedog

jQuery選擇器只選擇最後一個複選框列，但應選擇所有複選框？

回答

相關問題