3

テーブルにラジオ ボタンとチェックボックスが埋め込まれたフォームがいくつかあります。jquery を使用して 2 つのことを行う必要があります。

  • まず、ユーザーは、ボタンを含むテーブル セルをクリックして、ラジオ ボタンまたはチェックボックスを「クリック」できます。

  • 次に、ユーザーは2 回クリックして、チェックボックスとラジオ ボタンを切り替えることができます。したがって、すでにチェックされているラジオ ボタン (またはそれを含むセル) をクリックすると、チェックが解除され、グループ内でラジオ ボタンが選択されなくなります。

私はこれらの両方を別々に行うことができますが、それらを一緒に機能させることに固執しています。助けてください！

これが私のあまり機能しない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;
    });

1 つのボタンの 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 に答える