Web Dragon

【jQuery】inputチェックボックスがいくつチェックされたかカウントする

チェックボックスをカウントする機会があったので、まとめてみました。

HTML

<ul id="list">
	<li><label><input type="checkbox" name="cb01" value="りんご">りんご</label></li>
	<li><label><input type="checkbox" name="cb02" value="みかん">みかん</label></li>
	<li><label><input type="checkbox" name="cb03" value="メロン">メロン</label></li>
	<li><label><input type="checkbox" name="cb04" value="バナナ">バナナ</label></li>
	<li><label><input type="checkbox" name="cb05" value="いちご">いちご</label></li>
</ul>
<p class="count">0/5</p>

jQuery

var cbCnt = 0,
	cbCntMax = 5;
$(".list li input[type='checkbox']").on("click", function(){
	cbCnt = $('.list li input[type="checkbox"]:checked').length;
	$(".count").text(cbCnt + "/" + cbCntMax);
});