创建简单的 J 查询待办事项列表
Create Simple J Query todo list
我正在尝试在 Javascript 中创建一个简单的待办事项列表,但由于某种原因,当勾选复选框时,旁边的样式文本不会改变,而是标题文本样式根据小提琴更改
.HTML:
<table border="1">
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>
<input type="checkbox" value="None" id="squaredTwo" name="check" />
</td>
<td>row 2, cell 2</td>
</tr>
</table>
<h2> Heading 2</h2>
.CSS:
.newclass {
text-decoration: line-through;
color: red;
}
JQuery:
$('input[type="checkbox"]').click(function () {
if ( this.checked ) {
//alert('Checked');
$("h2").addClass('newclass');
} else {
//alert('Unchecked');
$("h2").removeClass('newclass');
}
});
请帮忙
像这样更改你的 Jquery
$('input[type="checkbox"]').click(function () {
if (this.checked) {
//alert('Checked');
$(this).closest("td").next().addClass('newclass');
} else {
//alert('Unchecked');
$(this).closest("td").next().removeClass('newclass');
}
});
演示小提琴
甚至比这更简单
$('input[type="checkbox"]').click(function () {
$(this).closest("td").next().toggleClass('newclass');
});
新演示小提琴
当您
在单击复选框时针对样式的 H2 元素时,就会发生这种情况。请改用下一个 TD 元素。
$('input[type="checkbox"]').click(function() {
if (this.checked) {
//alert('Checked');
$(this).parent().next().addClass('newclass');
} else {
//alert('Unchecked');
$(this).parent().next().removeClass('newclass');
}
});
相关文章:
- 用于查询错误转换的角度资源返回列表
- 如何在下拉列表更改时自动填充mysql查询结果中的文本框值
- 使用JS或新查询对列表进行排序
- angularjs $resource将查询资源列表转换为对象数组
- 如何将数据库中查询到的数据放在下拉列表和可点击按钮中
- Firebase-如何在列表查询中执行where项
- 使用下拉列表中的值查询 MySQL 数据库,然后使用结果填充文本字段而不刷新页面
- 在“仅查询链接”复选框中获取所选链接的列表
- jQuery Mobile 在数据库查询后刷新列表视图
- j查询在选择下拉列表值时生成动态表行
- 在 mongodb 查询中操作列表
- J查询如何在单击列表项时选中单选按钮
- 从另一个网站集查询 SharePoint 2013 列表
- j查询计数列表中每个项目的总数
- j查询从下拉列表中获取所选选项
- 使用可动态查询样式化列表
- j查询更改下拉列表调用 Web 服务以加载选项
- j使用“选择选项”下拉列表查询多星评级系统
- 可点击HTML列表查询db并输出到
- 为JAX-RS创建带有列表查询参数的URI