デザイン
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アナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
