第15回 チェックする項目の選択・未選択を画像でわかりやすくする | gihyo.jp

チェック項目を選択・未選択のエリアにわける 前回はテキストボックスに入力したパスワードを見えるようにする方法をご紹介しました。 今回ご紹介するのは、チェックボックスをもっと視覚的にわかりやすいようにする方法をご紹介します。選択・未選択をそれぞれの表示域にわける方法です。 選択・未選択の表示域を分ける 仕組みを考える 今回は仕組みから考えてみましょう。 選択・未選択エリアに同じ数のリストをそれぞれ用意 最初に表示させるもの以外を非表示に クリックをしたら、その要素は非表示にし、同じリスト位置(○番目)の要素を表示させる 選択エリアに入れる場合は同じ位置(○番目)のチェックボックスをチェック状態に、未選択位置に入れる場合はその逆をチェック状態にする 順を追って見ていくことにしましょう。 まずはHTMLを設定します。選択・未選択部分はリストにし、表示は画像で行うことにします。また、フォームの一部

[cyokodog]

なるほど