jQueryでテーブルの行ごとクリックして
チェックボックスにチェック出来るよう
にするTipsです。ユーザーがデータを
見ながらフォームを送信する際に、分か
りやすくしてあげよう、という目的です。
行ごとクリッカブルにする、みたいな感じ。

ちょっとサーバー移転作業もあるので適当な記事が日々続きますけど・・まもなく移転完了します。

Sample

サンプルです

:hover使うのでIE6だけ色が変わりませんけど、チェックはクロスブラウザで可能です。

コード

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
         var t = $(this).prop;
               if(t('checked'))
                  t('checked', '');
                    else
                  t('checked', 'checked');
                });
                
    $('table tr').click(function() {
           var c = $(this).children('td').children('input[type=checkbox]');
               if(c.prop('checked'))
                   c.prop('checked', '');
                    else
                   c.prop('checked', 'checked');
                }); 
            });

(‘checked’, false)とかでもOKです。どっちがいいとかあるのかな？よくわからん。サンプルではjQuery1.6.4を使っていますのでattrではなくpropにしています。

押しやすいし、データを見ながら入力するような複雑なフォームでもこのようにデータを見ながらその場でチェックできればユーザーさんの離脱も防げるんじゃないかなって思いました。ECサイトにも使えそうな気がしますな。

コードは以下を参考にしました。
(via:webstuffshare)