如何使用 jquery 在可点击的表格单元格中切换“选中”单选按钮？

Question

我有几个在表格中嵌入了单选按钮和复选框的表单。我想要两个使用 jquery 做两件事：

• 首先，用户可以通过单击包含按钮的表格单元格来“单击”单选按钮或复选框。

• 其次，用户可以通过单击两次来切换复选框和单选按钮。因此，单击已选中的单选按钮（或包含它的单元格）应该取消-选中它，不会在组内留下单选按钮。

我可以分别做这两个，但我坚持让它们一起工作。请帮忙！

这是我的不太正常的 jquery 代码：

$(".clickable", Q)
    .mouseover( function(){ $(this).addClass('mouseover-cell'); })
    .mouseout( function(){ $(this).removeClass('mouseover-cell'); })
    .click( function(event){
        if( event.target.type != 'checkbox' && event.target.type != 'radio' ){
            var x = $('input', this).attr("checked");
            $('input', this).attr("checked", !x);

            //$('input', this).trigger("click");
        }
        return false;
    });

单个按钮的 html 如下所示：

<tr>
  <td>
    Label for the button group
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="1">
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="2">
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="3">
  </td>
</tr>

Answer 1

您的代码在布局略有不同的情况下运行良好。

你可以在这里测试一下

Clickable cells

$(".clickable").mouseover( function(){ $(this).addClass('mouseover-cell'); });
$(".clickable").mouseout( function(){ $(this).removeClass('mouseover-cell'); });
$(".clickable").click( function(event){
    if( event.target.type != 'checkbox' && event.target.type != 'radio' ){
        var x = $('input', this).attr("checked");
        $('input', this).attr("checked", !x);
    }
    return false;
});​

<table border="1">
<tr>
  <td>
    Label for the button group
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="1">
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="2">
  </td>
  <td class="clickable">
    <input type="radio" name="q1" value="3">
  </td>
</tr>
</table>​