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

MENU [+]閉じる [×]
【jQuery】特定のチェックボックスがチェックされているか・いないかで処理を分ける方法

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。

また、チェックボックスを含むフォーム関連の項目の制御は、しばしばjQueryによって行われることが多いと思います。

その中で今回は、「特定のチェックボックスがチェックされたか・されていないかで処理を分けるjQueryの記述方法」をご紹介します。

この記事の目次

【結論】特定のチェックボックスがチェックされているか・いないかで処理を分けるjQueryの記述方法

結論として、Webページ上のチェックボックスをチェックしたか・しないかによって処理を分ける基本的なHTML&jQueryの構文はこちらです。

まずはHTMLから。

<input type="checkbox" name="sampleName" value="チェックする">チェックする

上記の、nameやvalueで設定されている値、また、チェックボックスの直後の文言などは、制作ページに応じて任意に設定してください。

それに対応する形で、jQueryの記述はこちらです。

$(function() {
	$('input[name="sampleName"]').change(function() {
		if ($(this).prop('checked')) {
			// チェックされた状態で発生させたい処理
		} else {
			// チェックが外れた状態で発生させたい処理
		}
	});
});

inputタグに関する要素の指定の箇所は、class名やID名でも(基本的には)いけるかと思います。

ただ、一般的には「このチェックボックス1つだけが対象!」とする場合が多いので、name属性で判別する場合が多いでしょう。

(class名だと特に、複数のチェックボックスに対して指定できますから、チェックする・外すの処理がメチャクチャになる場合もあり得ます…。)

さて、上記の処理では、指定したチェックボックスのチェックの有無が変化した時に、if文の処理が行われます。

チェックされているなら、コメントアウトの上の部分に処理を記述します。

逆に、チェックされていない場合の処理はコメントアウトの下の部分に記述していきます。

ページの先頭へ戻る

[考察]チェックボックスのチェックの有無のif文の応用アイデア

さて、この仕組みをどんなふうに応用できるでしょうか。

例えばですが、ちょっと複雑な「お申し込みフォーム」などがまず考えられそうです。

「Aコースで申し込む場合にチェックボックスを押すことで、Bコースに関する回答を全部非表示または無効にする」

みたいな処理なども、上記の記述を応用すれば実現できそうです。

または、スマートフォンのハンバーガーアイコンも、チェックボックスのチェックの有無で、メニューを開いたり閉じたりしているサイトがあります。

「ハンバーガーメニューが開いている場合は、ページの銭湯へ戻るボタンが邪魔だから非表示にしたい」

という場合は、ハンバーガーメニューが開いている状態(つまり連動するチェックボックスがチェックされている状態)で、ページへ戻るボタンを非表示にする処理を記述することで実現できそうです。

皆さんは、こちらの記述を応用して、どんな処理が実現できそうですか(⌒▽⌒)?

ページの先頭へ戻る

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

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

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

感想投稿フォームへ

関連記事一覧:【jQuery】特定のチェックボックスがチェックされているか・いないかで処理を分ける方法

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

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

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

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