Javascript 如何更改选中复选框时行的背景色

我有html表格，还有一些带有复选框的行。在复选框的帮助下，我想用一些背景色照亮那一行

<table>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' id='chkOrgRow' name='chkOrgRow' onclick='selectOrgChildRec(this)' />
        </td>
        <td></td>
        <td>L</td>
        <td>3/14/2015 </td>
        <td></td>
        <td>78</td>
        <td>1412</td>
        <td>2</td>
        <td>1235</td>
        <td>A</td>
        <td>R</td>
        <td>3/14/2015 12:13:56 PM</td>
    </tr>
</table>

L
3/14/2015 
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015 
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015 
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56

id

应该是唯一的

不要使用内联事件处理程序

不要使用内联样式，使用CSS类

$（'input[name=“chkOrgRow”]'）。在（'change'，function（）上{
$（this）.closest（'tr'）.toggleClass（'yellow'，$（this）.is（'：checked'））；
});
.yellow{
背景颜色：黄色；
}

L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
您需要创建一个函数，该函数将检查复选框是否已选中，然后更改其颜色（如果已选中）

function selectOrgChildRec(checkBox){  
   if(checkBox.checked==true){
      checkbox.parentNode.background='red';
   }
}

如果您使用的是
inline
函数，则只需将
css
类切换为一行即可：

function selectOrgChildRec(ctrl){
    $(ctrl).closest('tr').toggleClass('active');
}

元素的ID重复。ID应该总是唯一的。您可以使用相同的类名tham ID。我还建议您使用jquery而不是内联事件附加事件：

$('input[name="chkOrgRow"]').on('change', function() {
   $(this).closest('tr').css('background-color', $(this).is(':checked') ? 'yellow': '');
});


$（“[name='chkOrgRow']”）。更改（函数（）{
$（this）.closest（'tr'）.toggleClass（'ColorChange'）；
});
.ColorChange{
背景色：#CCFFCC；
}

L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56
L
3/14/2015
78
1412
2.
1235
A.
R
2015年3月14日下午12:13:56

$（“输入[type=checkbox]”）。在（'change'，function（）上{
if（$（this.prop（'checked'））
{
$（this.parent（）.parent（）.css（'background-color'，'#a52a2a'）；
}
});

abc
1.
1.
dbc
2.
2.
pqr
3.
3.
lbc
4.
4.
HTML中的
id
属性必须是唯一的。