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

妙高Web屋

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

Web制作

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

2018.2.21 2019.1.15

【jQuery】特定のチェックボックスがチェックされているか・いないかで処理を分ける方法
Web制作 0 0
妙高Web屋LINE@ 友だち追加

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

また、チェックボックスを含むフォーム関連の項目の制御は、しばしば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コースに関する回答を全部非表示または無効にする」

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

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

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

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

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

ページの先頭へ戻る

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

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

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

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

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

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

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