点击表格'检查'复选框中的行？

Question

我希望这是正确的领域，因为它比其他任何东西更具理论性。 我目前正在处理一个页面，用户可以通过单击最左侧列中的复选框并单击“ Edit按钮来选择要编辑的一行或多行。 我还没有决定是否要尝试编程这个功能，但是可以有效地隐藏复选框并使用某种javascript或jquery来点击表中的一行相当于检查相应行的复选框吗？ 我刚刚开始使用javascript和jquery，我对这有多强大感到困惑。 如果可以使用这种类型的功能，请通知我，如果是这样，实现这种行为的一般方法是什么？

Answer 1

是的，这是完全可以实现的，尽管如果有人在浏览器中禁用了JavaScript，您可能会考虑可访问性含义。

您可以采取多种方法。 举例来说，您可以使用类似以下（未经测试）的click处理程序：

$(document).on('click', '#yourtable tr', function(evt) {
    $(this).toggleClass('selected');
});

这将给你的表中的每个tr （id为#yourtable ） selected的类，然后你可以通过CSS设置样式和/或通过另一个jQuery读回。

在事件处理程序中，您还可以执行其他操作来记录选择，例如更新隐藏的输入字段，直接发回服务器或检查现有复选框（如果您愿意，可以选择隐藏）。

Answer 2

可行的。 这是如何做：

jsbin链接

HTML

<table border=1>
    <tr><td><input type="checkbox"></td><td>Something 1</td><td>Something else 1</td></tr>
    <tr><td><input type="checkbox"></td><td>Something 2</td><td>Something else 2</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 3</td><td>Something else 3</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 4</td><td>Something else 4</td></tr>
</table>

jQuery的

$('input[type=checkbox]').parent('td').hide(); // If JS disabled, checkboxes are still visible

$('table tr').click( function() {
    var $chk = $(this).find('input[type=checkbox]');
    $chk.prop('checked',!$chk.prop('checked'));
    $(this).toggleClass('selected'); // To show something happened
});

CSS

tr.selected{
   background-color:#ccc;
}

Answer 3

以下是所请求功能的简单实现 ：

$(document).ready(function() {
    $('tr').click(function(e) {
        var $checkbox = $(this).find('input');
        var isChecked = $checkbox.prop('checked');

        if (isChecked) {
            $checkbox.removeProp('checked');
        }
        else {
            $checkbox.prop('checked', 'checked');
        }
    });
});​