刪除複選框不更新該行的顏色

Question

時放在桌子外面工作，我可以得到checkbox，但我怎樣才能得到它的工作toggle/inside行與fontawesome-trash即可。？通過一行strike line or red color來指示刪除/未刪除。

這裏是snippet

Answer 1

嘗試這個請運行該代碼段

您需要使用.closest()

.closest（）： -對於組中的每一個元素，得到第一個元素通過測試元素本身並遍歷DOM樹中的祖先來匹配選擇器。從當前元素開始。向上行進，DOM樹，直到找到一個匹配的供選擇

$('.clsChk').click(function(){ 
 
    if($(this).prop('checked')){ 
 
\t \t \t $(this).closest('tr.rowClass').css({'color':'red'}); 
 
    } 
 
    else{ 
 
\t \t $(this).closest('tr.rowClass').css({'color':'black'}); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<label for="checkboxID"> Del/Undelete </label> 
 
<input type="checkbox" id="checkboxID" /> 
 

 
<table id="tableID"> 
 
    <tbody> 
 
     <tr class="rowClass"> 
 
      <td>** 1) First child cell of '.rowClass'</td> 
 
      <td>** 2) Second child cell of '.rowClass' </td> 
 
      <td>** 3) this checkbox needs a delete 
 
       <input class='clsChk' type="checkbox" id="checkboxID" /> 
 
      </td> <!--how to make this work--> 
 
     </tr> 
 
     
 
     <tr class="rowClass"> 
 
      <td>No class for this row</td> 
 
      <td>(Still no class)</td> 
 
     </tr> 
 
     <tr class="rowClass"> 
 
      <td>** 1) First child cell of '.rowClass'</td> 
 
      <td>** 2) Second child cell of '.rowClass' </td> 
 
      <td>** 3) this checkbox needs a delete 
 
       <input class='clsChk' type="checkbox" id="checkboxID" /> 
 
      </td> <!--how to make this work--> 
 
     </tr> 
 
     <tr class="rowClass"> 
 
      <td>** 1) First child cell of '.rowClass'</td> 
 
      <td>** 2) Second child cell of '.rowClass' </td> 
 
      <td>** 3) this checkbox needs a delete 
 
       <input class='clsChk' type="checkbox" id="checkboxID" /> 
 
      </td> <!--how to make this work--> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

使用parents和is(":checked")託運與否。

$('input:checkbox').change(function(){ 
 
    if($(this).is(":checked")) { 
 
     $(this).parents('tr').addClass("red"); 
 
    } else { 
 
     $(this).parents('tr').removeClass("red"); 
 
    } 
 
});

.red { 
 
    
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableID"> 
 
    <tbody> 
 
     <tr class="rowClass"> 
 
      <td>** 1) First child cell of '.rowClass'</td> 
 
      <td>** 2) Second child cell of '.rowClass' </td> 
 
      <td>** 3) this checkbox needs a delete <input type="checkbox" id="checkboxID" /></td> <!--how to make this work--> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>No class for this row</td> 
 
      <td>(Still no class)</td> 
 
     </tr> 
 
    </tbody> 
 
</table>