我有以下代码:
<table class="table">
@foreach (var item in Model.AllTasks)
{
<tr>
<td>
<input type="checkbox"/>
</td>
<td>
@Html.DisplayFor(modelItem => item.TaskDetails)
</td>
</tr>
}
我希望能够读取复选框是否已选中,如果是,请对任务详细信息应用删除线。目前,我正在努力寻找任何简单的方法来实现这一目标。
有什么想法吗?谢谢!
使用jquery
,您可以像遵循代码片段一样轻松完成。
$("input[type=checkbox]").change(function() {
if (this.checked) {
$(this).parent().next().css('text-decoration', 'line-through');
} else {
$(this).parent().next().css('text-decoration', 'none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox"></td><td> Box 1 </td>
</tr>
<tr>
<td><input type="checkbox"></td><td> Box 2 </td>
</tr>
<tr>
<td><input type="checkbox"></td><td> Box 3 </td>
</tr>
<tr>
<td><input type="checkbox"></td><td> Box 4 </td>
</tr>
</table>
向模型添加 bool 属性以确定任务是否完成:
public bool IsComplete { get;set; }
然后,在您看来,您可以执行以下操作:
@foreach (var item in Model.AllTasks)
{
@:<tr>
<td>
<input type="checkbox"/>
</td>
<td>
@if (item.IsComplete)
{
@:<strike>
}
@Html.DisplayFor(modelItem => item.TaskDetals)
@if (item.IsComplete)
{
@:</strike>
}
</td>
@:</tr>
}
这仅检查状态,然后有条件地打印strike
标签。
工作小提琴
如果你想通过javascript来做到这一点,因为他们选中了这个框,你可以使用以下代码:
$("[type=checkbox]").change(function() {
if(this.checked) {
$(this).parent().next().wrapInner("<strike></strike>")
}
});
这会使用 strike
标记动态换行文本。
js小提琴