マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 複数チェックボックスの1つにでもチェックされたら、コンテンツ表示

Mighty Ace Blog

マイティーBlog

デザイン

2021.09.29

複数チェックボックスの1つにでもチェックされたら、コンテンツ表示

 

 

まずは下準備

最終的な表示・非表示の動作制御はJavascriptで行いますが、その前に下記コードを参考として記述します。

<label><input type="checkbox" class="check" name="checklist" value="1">選択肢1</label>
<label><input type="checkbox" class="check" name="checklist" value="2">選択肢2</label>
<label><input type="checkbox" class="check" name="checklist" value="3">選択肢3</label>
<label><input type="checkbox" class="check" name="checklist" value="4">選択肢4</label>

<div id="box">
<p>チェックされたよ!</p>
</div>
#box{
display:none;
opasity:0;
transtion:0.3s ease all;/* スムーズに表示させる用 */
}

#box.active{
display:block;
opasity:1;
}

最低限のコードしか書いてないので、装飾関係はご自由に指定してください。

 

表示・非表示を制御しよう!

$(function(){
// チェックボックスの状態が変わったら(クリックされたら)
$("input[type='checkbox']").on('change', function () {
// チェックされているチェックボックスの数
if ($(".check:checked").length > 0) {
// ボタン有効
$("#box").addClass("active");
} else {
// ボタン無効
$("#box").removeClass("active");
}
});
});

 

はい!

上記Jsでチェックボックスの状態を確認し、状態に応じてclass「active」を付与しています。

cssでは「.active」の状態によって表示・非表示の指定を行っているので、

結果、チェックボックスの1つにでもチェックが入っていればコンテンツを表示できます。

 

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.