单击表行上的任何位置,它将选中它的复选框
click anywhere on a table row and it will check the checkbox its in...?
我想知道如何做到这一点,但我找不到它。基本上,我希望能够在任何地方单击表行,它将检查/未检查复选框其在。我知道这是可能的,因为这是PHPMyAdmin做的…
这是我的表行
<tbody>
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
</tbody>
<script type="text/javascript">
function selectRow(row)
{
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
…
<tbody>
<tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
<tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>
</tbody>
注意:id上也有碰撞。您的id必须是唯一的
这里有一个可选择的编程绑定:
document.querySelector("table").addEventListener("click", ({target}) => {
// discard direct clicks on input elements
if (target.nodeName === "INPUT") return;
// get the nearest tr
const tr = target.closest("tr");
if (tr) {
// if it exists, get the first checkbox
const checkbox = tr.querySelector("input[type='checkbox']");
if (checkbox) {
// if it exists, toggle the checked property
checkbox.checked = !checkbox.checked;
}
}
});
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1" />
</td>
<td>1</td>
<td>2011-04-21 22:04:56</td>
<td>action</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2" />
</td>
<td>2</td>
<td>2011-04-21 22:04:56</td>
<td>action</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk3" />
</td>
<td>2</td>
<td>2011-04-21 25:30:16</td>
<td>action</td>
</tr>
</tbody>
</table>
你不需要JavaScript:
td label {
display: block;
}
<td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td>
只是标签和一些CSS。
试试这个…
$("tr").click(function() {
var checkbox = $(this).find("input[type='checkbox']");
checkbox.attr('checked', !checkbox.attr('checked'));
});
http://jsfiddle.net/dVay8/既然这个问题有这么多的观点和公认的答案有一个小问题。
问题是当你点击复选框时,它不会改变。实际上发生的是复选框切换两次。因为我们点击了复选框和表格行。所以这里有一个适当的解决方案与修复。
$('tr').click(function(event){
var $target = $(event.target);
if(!$target.is('input:checkbox'))
{
$(this).find('input:checkbox').each(function() {
if(this.checked) this.checked = false;
else this.checked = true;
})
}
});
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- jQuery - 基于复选框禁用 href - 脚本的位置
- 自定义复选框的位置有抖动
- 使用弹出控件扩展程序Asp.net在更新面板内维护滚动位置复选框列表
- 在多个位置处理同一复选框
- 复选框标签的位置
- Jquery验证多个复选框设置错误位置
- 当我选择一个选项时,从所选位置选中复选框
- 通过ng-repeat, ng-model和复选框获取数组中的位置
- 通过单击表格单元格中的任何位置来勾选表格单元格中的复选框,并更改该单元格的背景颜色
- 鼠标单击当前鼠标位置或拖放时插入文本字段或复选框
- 将复选框标签设置为右侧或固定位置
- 单击行上的任意位置以选中复选框并突出显示它
- 单击表行上的任何位置,它将选中它的复选框
- 难度动态插入复选框在正确的位置