【コピペで使える】複数checkboxのうち指定のボックスがチェックされた瞬間に処理を行うJQueryサンプル
たーさん単体のチェックボックスがチェックされた瞬間に何らかの処理を行うJQueryの実装サンプル（changeイベント）はたくさん情報がありますが、複数のチェックボックスのうちどれか指定のチェックボックスにチェックされた場合のみ処理を行うサンプルを見つけるのに苦戦したため、今回備忘録としてまとめることにしました。
今回も応用がききやすいようになるべくシンプルな内容としました。
3つのチェックボックスのうち指定のふたつにチェックがされた場合に何らかの処理を行うサンプルです。
実際に必要となった場面は、問い合わせフォームの種類選択で指定の項目が選択されたときだけ、他の指定の入力項目を必須化したいというものです。
よければ参考にして頂ければと思います。
HTML
<input type="checkbox" name="chk" id="chk0" value="" /> チェック0
<input type="checkbox" name="chk" id="chk1" value="" /> チェック1
<input type="checkbox" name="chk" id="chk2" value="" /> チェック2
JQuery
<script>
$(function() {
// どれかがチェックされたら発動
$('input[name="chk"]').change(function() {
// 処理を実行するボックスのチェック状態を取得
var chk0 = $('#chk0').prop('checked');
var chk2 = $('#chk2').prop('checked');
// 0番目と2番目のいずれかがチェックされていれば処理を実行
if (chk0 || chk2) {
alert('処理を実行します。');
} else {
alert('何もしません。');
}
});
});
</script>
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
