3

我有几种表格中嵌入了单选按钮和复选框。我想要两个使用 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>
4

1 回答 1

2

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

你可以在这里测试

可点击的单元格

$(".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>​
于 2012-07-20T05:56:57.090 回答