〜第二回〜検索:jQueryでフォームのユーザビリティを強化jQueryを使ったフォームのユーザビリティを強化する、ちょっとしたサンプルを紹介します。問合せを目的としたサイトの場合、フォームは重要なページになります。今回のサンプルは選択項目が多い時など、パッと見でどの項目を選択したか分かり易くするものです。本当にちょっとしたことですがあるないとでは大分違うかと思います。true;}});});サンプルダウンロード解説まず以下のスクリプトですが、読み込み時にデフォルトでチェックが入っている項目に背景色をつけます。セレクタ「:checked」を指定することでチェックが入っている要素を選択します。「parent()」で親要素を選択(今回の場合は「labelタグ」)し、css(“background”,背景色)で背景色を設定します。背景色はなんでもよいです。ちなみに今回に限らず、「checkbox」や「radio」はlabelタグで囲むことをお薦めします。これだけで項目を選択し易くなります。$(":checked").parent().css("background","#ffcccc");次に「checkbox」や「radio」をクリックした際の処理です。フォーム部品の「input」をクリックしたら、変数「t」にクリックしたフォーム部品のタイプを格納します。「checkbox」をクリックした時は「checkbox」が、「radio」をクリックした時は「radio」が格納されます。変数「chk」にはクリックした部品の「checked」属性を格納します。チェックが入ったら「true」を、チェックが外れたら「false」を格納します。同様に「name」にはクリックした部品の「name」の値を格納します、これはクリックしたフォーム部品がradioボタンの場合に使います。$(this).attr('name');ここからはif文を使った判定になります。先ほどの変数「t」の値が「checkbox」だったら・・・つまりクリックしたフォーム部品が「checkbox」だった場合、同じく先ほどの変数「chk」の値を確認して、対象の背景色を変更します。チェックが入っていれば、背景色を設定し、チェックがはずれれば背景色を「空」にします。true;}同じく変数「t」の値が「radio」の場合は、対象の背景色を設定且つ、それ以外の「radio」ボタンの背景色を「空」にします。以下のスクリプト中の$(this).parent().parent().siblings().children()で選択した「radio」以外の要素を探し出しています。この部分に関してはhtmlの書き方(dom)によって変更する必要が出てくるかと思います。“]”)でクリックした「radio」ボタンを同じ「name」の値をもつ「radio」ボタンを選択し、背景を空にします。背景を空にした後で、対象だけは背景色を設定します。PM求めていたものだったので有難く使わせていただきます!感謝感謝m(__)mただ実装してみたところ、formにcheckboxとradioのみの場合は問題ないのですが、selectを同時に使おうとすると、selectの背景色が最初から変わっています。この問題を解決するにはどうしたらいいでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。