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

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

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に該当する」のチェックボックスがチェックされた時点でそのエリアを表示されるようにしておけば、回答者の方に必要以上の項目を見せて複雑にしてしまうことも防げそうです(^-^)

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

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

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

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

ページの先頭へ戻る

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

[【jQuery】チェックボックスの変更に応じて処理を分ける方法]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:【jQuery】チェックボックスの変更に応じて処理を分ける方法

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

ユーザーの方の操作に応じて、Webページ内の表示や動きを制御するホームページは、今ではよく見受けられます。 それらを実現している要素は「jQuery&CS …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ