jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする

Ads

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)

タイトルとURLをコピーしました