这是我的问题。我有一个3行的表。在每一行中都有一个隐藏的检查'单击表格行时打开和关闭的图标标记。到目前为止,我已经成功地工作了。我现在要做的就是一次只显示一个复选标记。因此,如果已经检查了一行并且您单击了另一行,则它将取消选中先前检查的行并在新选择的行中显示复选标记。这是我目前的HTML和js。
$(document).ready(function () {
var tr = $('#eventListings').find('tr');
$(tr).click(function () {
if ($(this).find('td i').hasClass('hide')) {
$(this).find('td i').removeClass('hide');
} else {
$(this).find('td i').addClass('hide');
}
});
});

<table id="events" class="table">
<tbody>
<tr>
<td>10/19 @ 4:30 PM</td>
<td>Denver Broncos v San Francisco 49ers</td>
<td><i class="icon-check hide"></i></td>
</tr>
<tr>
<td>10/23 @ 4:25 PM</td>
<td>Denver Broncos v San Diego Chargers</td>
<td><i class="icon-check hide"></i></td>
</tr>
<tr>
<td>11/23 @ 6:30 PM</td>
<td>Denver Broncos v Miami Dolphins</td>
<td><i class="icon-check hide"></i></td>
</tr>
</tbody>
</table>
&#13;
答案 0 :(得分:1)
您可以使用:visible
选择器隐藏可见的已检查项目,然后使用toggleClass()
切换点击的项目,如下所示:
$(document).ready(function () {
var tr = $('#events').find('tr');
$(tr).click(function () {
$("td i:visible").addClass('hide')
$(this).find('td i').toggleClass('hide');
});
});
&#13;
/*For Demo Purpose*/
i::after{
content:"checked";
}
i.hide{
display:none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="events" class="table">
<tbody>
<tr>
<td>10/19 @ 4:30 PM</td>
<td>Denver Broncos v San Francisco 49ers</td>
<td><i class="icon-check hide"></i></td>
</tr>
<tr>
<td>10/23 @ 4:25 PM</td>
<td>Denver Broncos v San Diego Chargers</td>
<td><i class="icon-check hide"></i></td>
</tr>
<tr>
<td>11/23 @ 6:30 PM</td>
<td>Denver Broncos v Miami Dolphins</td>
<td><i class="icon-check hide"></i></td>
</tr>
</tbody>
</table>
&#13;