javascript - 单击表“检查”复选框中的行？

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');
        }
    });
});​