我用html开发了一个代码,其中的复选框由jquery管理。
<tr>
<td>
<div class="checkbox">
<label><input type="checkbox" id="checkbox2"></label>
</div>
</td>
<td><p id="taks2">Task 2</p></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
jquery脚本是这样的:
<script>
$(document).ready(function(){
$('#checkbox2').click(function(){
if($(this).is(":checked")){
$('#taks2').replaceWith('<s>' + $('#task2').text() + '</s>');
}
else if($(this).is(":not(:checked)")){
}
});
});
</script>
如果用户选中了复选框,则应将“任务2”转换为 Task (使用del或strick标签后输出),如果未选中此复选框,则应再次将其转换为上一个像“任务2”这样的表格。
答案 0 :(得分:1)
在选中和取消选中复选框时,可以使用css类添加和删除:
$(document).ready(function(){
$('#checkbox2').click(function(){
if($(this).is(":checked")){
$('#taks2').addClass('strike');
} else {
$('#taks2').removeClass('strike');
}
});
});
.strike{
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<div class="checkbox">
<label><input type="checkbox" id="checkbox2"></label>
</div>
</td>
<td><p id="taks2">Task 2</p></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
您还可以使用toggleClass()
来缩短代码,例如:
$(document).ready(function(){
$('#checkbox2').click(function(){
var isChecked = $(this).is(":checked");
$('#taks2').toggleClass('strike', isChecked);
});
});
.strike{
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<div class="checkbox">
<label><input type="checkbox" id="checkbox2"></label>
</div>
</td>
<td><p id="taks2">Task 2</p></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
答案 1 :(得分:0)
您可以仅使用CSS
来实现此目的,使用更改label
:selected
的下一个checkbox
的样式的选择器即可:
input[type='checkbox']:checked + label {
text-decoration: line-through;
}
<div class="checkbox">
<input type="checkbox" id="checkbox1" /><label>Task 1</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox2" /><label>Task 2</label>
</div>