[英]Check/uncheck a checkbox in the table row when any checkbox in the same row is clicked
I have a simple table as following which has checkboxes in the first and last columns of each row. 我有一个简单的表,如下所示,每行的第一列和最后一列都有复选框。
<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>
Problem: When I check/uncheck the last column's checkbox in the first row, the first column's checkbox in the same row should be checked/unchecked. 问题:当我选中/取消选中第一行中最后一列的复选框时,应检查/取消选中同一行中第一列的复选框。 Similarly, if I check/uncheck the first column's checkbox, the corresponding last column checkbox should be checked/unchecked.
同样,如果我选中/取消选中第一列的复选框,则应选中/取消选中相应的最后一列复选框。
How can I achieve this in javascript? 我怎样才能在javascript中实现这一点? Any help or pointers would be really appreciated.
任何帮助或指示将非常感激。
Here is the fiddle which I have created: Fiddle 这是我创造的小提琴 : 小提琴
Thank you. 谢谢。
Use
:checkbox
selector to select input typecheckbox
elements.使用
:checkbox
选择器选择输入类型checkbox
元素。
Try this: 尝试这个:
$(':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>
Using JavaScript: 使用JavaScript:
Use
querySelectorAll('[type="checkbox"]')
to findcheckbox
elements.使用
querySelectorAll('[type="checkbox"]')
查找checkbox
元素。
Try this: 尝试这个:
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>
One possible Javascript
solution to toggle Checkboxes
on Table Row
click is shown below: 在表
Row
点击上切换Checkboxes
一种可能的Javascript
解决方案如下所示:
HTML 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 CSS
table, th, td{
border: 1px solid #c0c0c0;
border-collapse: collapse;
}
table{width:100%;}
Javascript 使用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;
}
Working jsfiddle demo at: https://jsfiddle.net/t6nsxgnz/ Practical implementation at: http://busny.net 工作jsfiddle演示: https ://jsfiddle.net/t6nsxgnz/实际实施: http ://busny.net
You can further customize this solution pertinent to your task by modifying the selectRow(row)
function: 您可以通过修改
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
}
Another variation of this functionality coded in jQuery can be found in online pop-quiz engine ( http://webinfocentral.com ), implemented via the follwoing code snippet: 在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'));
}
});
In this case, Row
Click
(at any place of the Row
) or CheckBox Click
events will toggle the state of that particular CheckBox
. 在这种情况下,
Row
Click
(在任何地方Row
)或复选框Click
事件将触发特定的状态CheckBox
。 The state of other CheckBoxes can be synchronized with this one (by using "siblings" property, for example). 其他CheckBoxes的状态可以与此同步(例如,使用“siblings”属性)。 Hope this may help.
希望这可能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.