Web制作

複数チェックボックスの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つにでもチェックが入っていればコンテンツを表示できます。