使用html表行作为复选框的方法？

Question

我有一个HTML表（从数据库中获取数据，但除了这一点之外），每个行都有一个复选框。是一种简单的方法，允许用户通过单击行中的任意位置来检查复选框，而不是复选框本身？我知道这可以使用javascript完成，但是有一种简单的方法可以在rails中完成吗？有人知道网上的任何宝石或教程吗？

Answer 1

这是一个有效的jsfiddle示例：http://jsfiddle.net/3XZvV/2/

它使用每个表行中的第一个复选框。把它们放在任何<td>中。您可以显示复选框，但是您需要对其进行修改以允许单击它们 - 此设计不适用于可单击的复选框，因为它会在单击该表行中的任何内容时触发事件。 （对于这个问题来说这已经足够了，但我们对改进持开放态度。）

以下是完成此任务的JavaScript：

$('.clickable tr').click(function() {
   var c = $(this).find(':checkbox').filter(':first');
   c.attr('checked', !c.attr('checked'));
   $(this).toggleClass('selected');
});

只需将class="clickable"放在您的桌子上即可。为了明确你可以与行交互，一些CSS很好。看小提琴。

Answer 2

你必须使用JavaScript。实际上并没有那么难。只需为每个TR添加一个单击事件，以切换复选框的checked =“checked”状态，并更改TR的背景颜色以显示它已被选中。

作为进一步的增强功能，您可以完全删除该复选框并使用隐藏字段来节省可视空间。请确保您的用户知道表行是可选的。