新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

【jQuery】チェックボックスの変更に応じて処理を分ける方法

2018.2.6 2019.1.15

【jQuery】チェックボックスの変更に応じて処理を分ける方法
Web制作 0 0

jQueryといえば、ペーズのスムーズスクロールや画像のスライドショーだけでなく、フォームの項目の制御にも使えます。

代表的なものの一つが「チェックボックス」ですが、チェックボックスにチェックした時と、チェックを外した時(または初期表示の状態)とで処理を分けるようなjQueryの記述が使えれば、より便利になりそうです。

そこで今回は「チェックボックスの変更に応じて処理を分ける方法」をご紹介します。

この記事の目次

【結論】チェックボックスのチェックの有無に応じて処理を分けるjQueryの記述方法

チェックボックスにつけたid名を[idName]とします。

そして、チェックボックスのチェックの有無に応じて動きをもたせたい要素のclass名に[className]という名称をつけたと仮定します。

そのうえで「チェックボックスのチェックの有無に応じて、要素の表示・非表示を切り分けるjQueryの記述」は、以下のとおりです。

<script>
$('#idName').change(function(){
if ($(this).is(':checked')) {
$('.className').css('display','block');
} else {
$('.className').css('display','none');
}
});
</script>

[is(‘:checked’)]で、[idName]のチェックボックスがチェックされているか、チェックされていないかを判別しています。

そして[is(‘:checked’)]が[true(チェックされている)]の場合は表示されて、チェックを外したら非表示となるように戻すjQueryが実装できるはずです(^^)

ページの先頭へ戻る

[応用]フォーム入力やハンバーガーメニューで「チェックの有無の分岐」を活用できる

上記の記述を使って、いろいろな応用ができそうです。

例えば、お問い合わせフォームなどで、

「Aに該当すると答えた方は、以下の質問にお答えください」

のような項目があったとして、そこで「Aに該当する」と答えた場合のみ「以下の質問」なるものが表示されていれば十分ですよね?

その場合、「以下の質問」に該当する箇所を[className]をつけたdivタグか何かを囲っておきます。

初期表示では[className]で囲った部分を非表示にしておいて、「Aに該当する」のチェックボックスがチェックされた時点でそのエリアを表示されるようにしておけば、回答者の方に必要以上の項目を見せて複雑にしてしまうことも防げそうです(^-^)

他には、 スマートフォンサイトのハンバーガーメニューにもチェックボックスが使われることがあります。

チェックボックスとハンバーガーアイコンを連動させておけば、

「ハンバーガーアイコンをタップした時(つまり連動しているチェックボックスがチェックされた時)にメニューが開く」

のような処理にできそうです。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

メールマガジンでWeb制作の情報を購読!

妙高Web屋では、ホームページの管理・運営のお役立ち情報を当サイト内よりも早く、メールマガジンでご紹介しております。

次回配信予定のテーマは、こちらです!

「ホームページ・ブログ・SNSって、どんな内容を投稿すれば良いの!?」

気になる方は、下記のボタンからメルマガ購読をお申し込みください。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ