本文介绍利用jQuery实现表格行点击选中效果的两种写法。针对单选框，通过添加选中类并同步radio状态实现互斥选择；针对复选框，通过判断当前行是否已选中来切换checkbox状态及CSS类。代码展示了如何结合CSS类名与DOM操作优化用户交互体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
var hasSelected = $(this).hasClass('selected');
$(this)[hasSelected ? "removeClass" : "addClass"]('selected').find(':checkbox').attr('checked', !hasSelected);
});
$('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>s</th>
<th>sd</th>
<th>sdasdsa sda</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>s</td>
<td>s</td>
<td>sdadsadsd</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>sadasdsd</td>
<td>s</td>
<td>sads</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked='checked'/></td>
<td>sas</td>
<td>s</td>
<td>aasdsad sad</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>ss</td>
<td>ssad</td>
<td>dadsadsad</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>Rain</td>
<td>sd</td>
<td>sdsad sad asd </td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""/></td>
<td>MAXMAN</td>
<td>s</td>
<td>实打实的速度是</td>
</tr>
</tbody>
</table>
</body>
</html>
jQuery实现单选框表格行选中
在jQuery中实现单选框（radio）的表格行选中效果，可以通过监听表格行的点击事件来完成。当用户点击某一行时，首先为该行为添加表示选中的CSS类（如'selected'），同时移除其他兄弟行的选中类，从而实现互斥效果。接着，找到该行内的单选框元素，将其checked属性设置为true，确保状态与视觉选中一致。此外，还可以通过选择器直接定位所有已选中的单选框所在的行，并为其添加选中类，以初始化或同步状态。
$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
$(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
});
// $('table :radio:checked').parent().parent().addClass('selected');
$('table :radio:checked').parents("tr").addClass('selected');
//$('tbody>tr:has(:checked)').addClass('selected');
})jQuery实现复选框表格行选中
对于复选框（checkbox）的表格行选中，逻辑略有不同。点击表格行时，首先判断该行是否已经具有选中类（'selected'）。如果已选中，则移除该类，并将行内的复选框状态设为未选中；如果未选中，则添加选中类，并将复选框状态设为选中。这种处理方式允许用户通过点击行来切换复选框的状态，同时保持视觉反馈的一致性。同样，可以通过选择器定位所有已选中的复选框所在的行，并统一添加选中类，以处理初始状态或批量操作后的状态同步。
$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected').find(':checkbox').attr('checked', false);
}else{
$(this).addClass('selected').find(':checkbox').attr('checked', true);
}
});
// $('table :checkbox:checked').parent().parent().addClass('selected');
$('table :checkbox:checked').parents("tr").addClass('selected');
//$('tbody>tr:has(:checked)').addClass('selected');
})