jQueryセレクターは最後のチェックボックス列のみを選択しますが、すべてのチェックボックスを選択する必要がありますか？

Question

ユーザーが<table>内のチェックボックスをチェックすると、行全体を強調表示しようとしています。私はjqueryのための "dataTable"プラグインを使用しています。

私はこれが私の望むように機能することができます。現在、「チェックボックス」を持つ右端または最後の列にセレクタが適用されます。だから、ボックスをチェックすると（ "th"のcheck_allボックスか "td"のチェックボックスのどちらかが正しく行がハイライト表示されます）、2番目の列のチェックボックスをチェックしても何も起こりません。セレクタは、ここでは適用されませんでした

私はjQueryを使って何が間違って理解していない

ここに私のjQueryの：。。HERESに

//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> 

Answer 1

私は、チェックボックスのループを削除することで作業するためのハイライトを得た。私はそれを選択してすべてのチェックボックスのイベントワイヤーアップと行チェックボックスのイベントワイヤを分離する方が良いと思います。

// 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"); 
      } 
    //}); 
}); 

Answer 2

なぜ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"); 
      } 
}); 

Answer 3

返信いただきありがとうございます。

私は、その行のチェックボックスがチェックされた場合にすべての行をハイライトする "thead"入力ボックスのための別個のセレクタを持つことになりました。これはすべてのシナリオで効果的でした。

他のセレクタは "tbody"チェックボックス用で、 ".tr"までトラバースして.find（）を使用すると、チェックボックスがオンになっているかどうかを確認できます。

私がこのことについて新しい考え方を引き起こすのを助けてくれたすべての人に感謝します。

HERESに更新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"); 
          } 

         });