• かちびと.net

    jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにするTips。フォーム中にデータを見ながら入力する時などに施工してあげると便利かなと思いました。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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 :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services