もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第13回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(5)デザインされたチェックボックスを実装する

この記事を読むのに必要な時間:およそ 6 分

ラジオボタンのデザイン変更

ラジオボタンやチェックボックスもJavaScriptを使うことで,疑似的にデザインを変更して扱うことが可能になります。

擬似的というのは,実際のinputを扱うのではなく,imgの画像を代わりに利用し,そこにクリックなどのイベントを追加することで,擬似的にラジオボタンやチェックボックスの動作を実現しています。

使用した画像

ラジオボタン画像

ラジオボタン画像 ラジオボタン画像

ラジオボタンのデザイン変更

jQuery(function($){
    var img = 'images/radio.gif',
         img_on = 'images/radio_on.gif';
    $(':checked').removeAttr('checked');
    $('.radioImg input:radio').hide().after('<img src="' + img + '" />');
    $('.radioImg input:radio:hidden').next().click(function(){
        $('.radioImg :checked').removeAttr('checked');
        $(this).attr('src',img_on)
                .siblings().attr('src',img);
        $(this).prev().attr('checked','checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        if($('[name="gender"]:checked').length > 0 && $('[name="gender2"]:checked').length > 0){
            alert('チェックされた値は「' + $('[name="gender"]:checked').val() + '」と「' + $('[name="gender2"]:checked').val() + '」');
        }else {
            alert('チェックされていない項目があります');
        }
    });
});

画像

FirebugでのHTML表示

FirebugでのHTML表示

今回はimg要素の追加もJavaScript側で設定してあり,実際のinputはその画像の直前にあり,非表示状態にしてあります。

Scriptの最初の部分(5行目)でデフォルトのラジオボタンを.hide()で非表示にし,その非表示にしたラジオボタンの直後に.after()でIMG要素を追加しています。ラジオボタンの場合は,チェックされている箇所は常に一カ所のみなので,クリックした部分の画像をだけ,チェックされた画像に変化をさせ,他の画像は初期状態に戻すScriptを入れます。今回のサンプルHTMLでは,ラジオボタンを全て同階層においたので,.sibilings()で対応しています。

label部分をクリックした際は,.trigger('click')を利用して,ラジオボタンがクリックされた動作を実行するようにします。

今回画像の切り替えのURLはスクリプト内で変数に入れて実行してありますが,この例だと汎用性は高くはありません。画像のURLを指定せずとも使えるようにするためには,Scriptを工夫するもしくはCSSで対応するなどの必要があります。

チェックボックスのデザイン変更

ラジオボタン同様に,チェックボックスも疑似チェックボックスとすることで,デザインを変更することが可能です。

使用した画像

チェックボックス画像

チェックボックス画像 チェックボックス画像

チェックボックスのデザイン変更

jQuery(function($){
    var img = 'images/check.gif',
         img_on = 'images/check_on.gif';
    $(':checked').removeAttr('checked');
    $('.checkImg input:checkbox').hide().after('<img src="' + img + '" />');
    $('.checkImg input:checkbox:hidden').next().toggle(function(){
        $(this).attr('src',img_on);
        $(this).prev().attr('checked','checked');
    },function(){
        $(this).attr('src',img);
        $(this).prev().removeAttr('checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        var colorElm ='',
        colorElm2 = '';
        $('[name="color"]:checked').each(function(){
            colorElm += $(this).val();
        });
        $('[name="color2"]:checked').each(function(){
            colorElm2 += $(this).val();
        });
        alert('チェックされた値は「' + colorElm + '」と「' + colorElm2 + '」');
    });
});

画像

FirebugでのHTML表示

FirebugでのHTML表示

基本は先ほどの疑似ラジオボタンと同じですが,クリックでの動作はそれぞれ個々のチェックボックスでの動作となるので,ここでは「.toggle(fn,fn)」を利用しています。

前回のセレクトボックスでもそうですが,フォームの各要素に代替する機能を持った要素を追加することで,それらを擬似的に表示できるので,様々な凝ったデザインをすることが可能なのです。その際のScriptは汎用性を持たせるかどうかで,作り方も変わってきますが,単純に今回のような作りでも代替可能です。きれいなフォームを利用したいという時などに活用してみてはいかがでしょうか。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/