【フォーム】checkboxのvalue値を取得してコンテンツ表示

製品名のチェックボックスを選択すると該当の製品の説明が表示され、チェックを外すと製品の説明が非表示になります。製品名を全て選択できるチェックボックスも実装します。

htmlのコードは下記になります。
製品名のチェックボックスはクラス名productListのリスト内に配置し、valueに製品ごとの数値を設定します。「すべて」のチェックボックスはクラス名productListのリスト外、ページの上部に配置します。チェックボックスと製品名、チェックボックスと「すべて」のテキストはlabelタグで内包します。

<div class="checkAllBox">
	<label><input type="checkbox" value="all" class="partsCheck" id="checkAll"><span>すべて</span></label>
</div>
<ul class="productList">
	<li><label><input type="checkbox" value="0" class="partsCheck"><span>製品A：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="1" class="partsCheck"><span>製品B：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="2" class="partsCheck"><span>製品C：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="3" class="partsCheck"><span>製品D：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="4" class="partsCheck"><span>製品E：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="5" class="partsCheck"><span>製品F：ダミーテキスト</span></label></li>
	<li><label><input type="checkbox" value="6" class="partsCheck"><span>製品G：ダミーテキスト</span></label></li>
</ul>
<p class="productTxt">製品A：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品B：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品C：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品D：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品E：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品F：ダミーテキストダミーテキスト</p>
<p class="productTxt">製品G：ダミーテキストダミーテキスト</p>

続いてCSSのコードです。
input type=”checkbox”はCSSで装飾ができないためdisplay: none;で非表示にします。代わりにチェックボックスに隣接するspanタグの疑似要素にチェックボックスに見える装飾をします。
製品の説明が記述されたクラス名productTxtのpタグは非表示にしておきます。

.productList {
	margin: 1em 0 1.5em 2em;
	padding: 0;
}
.productList li {
	list-style-type: none;
	margin: 0 0 .5em;
}
.productList li:last-child {
	margin: 0;
}
.partsCheck {
	display: none;
}
.partsCheck + span {
	display: inline-block;
	position: relative;
	padding-left: 25px;
}
.partsCheck + span:before {
	display: block;
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10px;
	width: 17px;
	height: 17px;
	border: 2px solid #ccc;
	border-radius: 3px;
}
.partsCheck + span:hover:before {
	border-color: #0171bd;
}
.partsCheck:checked + span:after {
	display: block;
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 50%;
	left: 6px;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #0171bd;
	border-bottom: 2px solid #0171bd;
	transform: rotate(45deg);
}
.productTxt {
	display: none;
	margin: 0 0 1em;
	padding: 0;
}

最後にjQueryのコードです。
製品名のチェックボックスの選択・選択解除、「すべて」のチェックボックスの選択・選択解除の処理は分けて記述します。
製品名のチェックボックスを選択・選択解除した時はpropを利用してチェックボックスの選択・選択解除を判定し、value値の順番のクラス名productTxtのpタグを表示・非表示します。選択解除の時のみ「すべて」のチェックボックスも選択解除にします。
「すべて」のチェックボックスを選択・選択解除した時は全ての製品名のチェックボックスを表示・非表示してから関数checkContentsを呼び出します。関数checkContents内はeachの処理があるため、全ての製品説明の表示・非表示に対応できます。

$(function() {
	function checkContents() {
		$('.productList .partsCheck').each(function() {
			var data = $(this).val();
			if ($(this).prop('checked') == true) {
				$('.productTxt:eq('+data+')').show();
			} else {
				$('.productTxt:eq('+data+')').hide();
				$("#checkAll").prop('checked',false);
			}
		});
	}
	$('.productList .partsCheck').on('change', function() {
		checkContents();
	});
	$("#checkAll").on('change', function() {
		if ($(this).prop('checked') == true) {
			$(this).parents('.checkAllBox').next().find('input').prop('checked', true);
		} else {
			$(this).parents('.checkAllBox').next().find('input').prop('checked', false);
		}
		checkContents();
	});
});