Question

我可以将checkbox放在桌子外面工作，但是如何让它工作toggle/inside fontawesome-trash行可以。 ？在行中加strike line or red color表示删除/取消删除。

Answer 1

试试这个请运行代码段

您需要使用.closest()

.closest（）： - 对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。从当前元素开始。向上移动DOM树，直到找到所提供选择器的匹配

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用parents和is(":checked")进行检查。

＆＃13;

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

＆＃13;

.red {
   
    color : red;
}

＆＃13;

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

＆＃13;

删除同一行中的复选框不会更新行颜色

2 个答案: