我有一个简单的表格如下,每行的第一列和最后一列都有复选框。
<table style="width:100%">
<tr>
<td><input type="checkbox" /></td>
<td>Smith</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Jackson</td>
<td><input type="checkbox" /></td>
</tr>
</table>
问题: 当我选中/取消选中第一行中最后一列的复选框时,应检查/取消选中同一行中第一列的复选框。同样,如果我选中/取消选中第一列的复选框,则应选中/取消选中相应的最后一列复选框。
我怎样才能在javascript中实现这一目标?任何帮助或指示都会非常感激。
这是我创建的小提琴:Fiddle
谢谢。
答案 0 :(得分:6)
使用
:checkbox
选择器选择输入类型checkbox
元素。
试试这个:
$(':checkbox').on('change', function() {
$(this).closest('tr').find(':checkbox').prop('checked', this.checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>
<input type="checkbox" />
</td>
<td>Smith</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Jackson</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
使用JavaScript:
使用
querySelectorAll('[type="checkbox"]')
查找checkbox
元素。
试试这个:
var checkboxes = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(checkboxes, function(checkbox) {
checkbox.onchange = function() {
var currentRow = this.parentNode.parentNode;
var cbElems = currentRow.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbElems, function(cb) {
cb.checked = this.checked;
}.bind(this))
};
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:100%">
<tr>
<td>
<input type="checkbox" />
</td>
<td>Smith</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Jackson</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
答案 1 :(得分:1)
在表Javascript
点击上切换Checkboxes
的一个Row
解决方案如下所示:
<强> HTML 强>
<table id = "Table1">
<tr>
<td><input type="checkbox" /></td>
<td>John Smith</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Anna Warner</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<强> CSS 强>
table, th, td{
border: 1px solid #c0c0c0;
border-collapse: collapse;
}
table{width:100%;}
<强>的Javascript 强>
// row click will toggle checkboxes
row_OnClick("Table1")
function row_OnClick(tblId) {
try {
var rows = document.getElementById(tblId).rows;
for (i = 0; i < rows.length; i++) {
var _row = rows[i];
_row.onclick = null;
_row.onclick = function () {
return function () {selectRow(this);};
}(_row);
}
}
catch (err) { }
}
function selectRow(row) {
row.cells[0].firstChild.checked = !row.cells[0].firstChild.checked;
row.cells[2].firstChild.checked = row.cells[0].firstChild.checked;
}
在https://jsfiddle.net/t6nsxgnz/处工作jsfiddle演示 实际执行:http://busny.net
您可以通过修改selectRow(row)
功能
function selectRow(row) {
row.cells[0].firstChild.checked = // add your code for the 1st CheckBox
row.cells[2].firstChild.checked = // add your code for the 2nd CheckBox
}
jQuery中编码的此功能的另一种变体可以在在线pop-quiz引擎(http://webinfocentral.com)中找到,通过以下代码片段实现:
// toggle Checkboxes on row click
$(Table1 tr').click(function (event) {
// find the checkbox in the row
var _chk = $(this).find('input:checkbox');
if (!($(event.target).is("checkbox"))) {
$(_chk).prop('checked', !$(_chk).prop('checked'));
}
});
在这种情况下,Row
Click
(在Row
)或CheckBox Click
事件的任何位置都会切换特定CheckBox
的状态。其他CheckBoxes的状态可以与此同步(例如,使用“siblings”属性)。
希望这可能有所帮助。