テーブルのセルをクリックしても、セル内のチェックボックスにチェックをつける方法


ネット上でアンケートをやっていると、<td>タグ内にチェックボックスがあることがあります。中には、そのセルの中のどこをクリックしてもチェックしてくれるものもあるのですが、チェックボックスをちゃんとクリックしなければチェックしないというのがほとんどです。

では、今回はセル内のどこをクリックしてもチェックボックスにチェックを入れる方法をお伝えします。親ノードが<div>タグとかだと、<label>で囲めばいいのですが、<td>タグだとその方法はできません。
 まず考えられるのが、以下のようなソースです。

分かりやすいように実際の表示では、幅高さともに100pxにし、上下中心位置に配置し、黒い単線をつけています。

では早速クリックしてみましょう。クリッククリック! おっ!できてるできてる。と思ってもらえたらうれしいです。
 ただ、これだと肝心のチェックボックスをクリックするとチェックがつかないときがあります。理由は単純、2度クリックするのと同じことをやっているからです(今確認してみると、OperaとIEではちゃんとチェックがつきました)。では、続いてこれの対処法を書いていきます。

そう、2度で戻ってしまうなら、3度クリックしたことにすればいいのです! この方法でも、IEやOperaでちゃんとチェックがつくようですし。

なんだか遠回しなような気もしますが、これ以外いい方法が思いつきません。もっといい方法があれば誰か教えてください。

コメントを残す

メールアドレスが公開されることはありません。