如何使用jquery切换"；勾选“；可单击表格单元格中的单选按钮？

我有几个表格，表格中嵌入了单选按钮和复选框。我希望使用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>

按钮组的标签

您的代码在布局稍有不同的情况下工作正常

你可以在这里测试

$（“.clickable”）.mouseover（函数（）{$（this.addClass（'mouseover-cell'）；}）；
$（“.clickable”）.mouseout（函数（）{$（this.removeClass（'mouseover-cell'）；}）；
$（“.clickable”）。单击（函数（事件）{
if（event.target.type！=“复选框”&&event.target.type！=“无线电”）{
var x=$（'input'，this）.attr（“checked”）；
$（'input'，this）.attr（“选中的”，！x）；
}
返回false；
});​
按钮组的标签
​

请尝试使用

.prop（）

而不是

.attr（）

查看CheckedTanks！这就更接近了，但还不是很接近。如果我试图通过单击按钮本身（而不是表格单元格）取消选择单选按钮，则失败。还有，其他一切都可以！不，这不能解决问题--请尝试单击单选按钮本身。您使用的浏览器是什么？你有jQuery吗？无论是点击单元格还是点击单选按钮，它都可以在chrome上正常工作。你试过我发布的链接了吗？我正在使用Chrome v20和jquery，我试过了链接。问题是通过单击按钮本身取消选择单选按钮。

$(".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>​