jqueryを使用したチェックボックスの一括選択・一括解除

またチェックボックスネタで恐縮なんですが、jqueryでの書き方が分かりやすかったのでメモです。

地域選択とかでよく使いそうなやつです。
チェックボックス一括選択のサンプル

※CSSなどは前回の分を使いまわしてます。

<div id="#wrapper">
	<ul>
		<li>
			<input type="checkbox" name="fukuoka_all" id="fukuoka_all" class="allFukuoka">
			<label for="fukuoka_all">福岡市</label>
		</li>
		<li>
			<input type="checkbox" name="higashiku" id="higashiku" class="checkFukuoka">
			<label for="higashiku">東区</label>
		</li>
		<li>
			<input type="checkbox" name="hakataku" id="hakataku" class="checkFukuoka">
			<label for="hakataku">博多区</label>
		</li>
		<li>
			<input type="checkbox" name="chuouku" id="chuouku" class="checkFukuoka">
			<label for="chuouku">中央区</label>
		</li>
		<li>
			<input type="checkbox" name="minamiku" id="minamiku" class="checkFukuoka">
			<label for="minamiku">南区</label>
		</li>
		<li>
			<input type="checkbox" name="nishiku" id="nishiku" class="checkFukuoka">
			<label for="nishiku">西区</label>
		</li>
		<li>
			<input type="checkbox" name="jonanku" id="jonanku" class="checkFukuoka">
			<label for="jonanku">城南区</label>
		</li>
		<li>
			<input type="checkbox" name="sawaraku" id="sawaraku" class="checkFukuoka">
			<label for="sawaraku">早良区</label>
		</li>
	</ul>
</div>

$(function(){
	$('.allFukuoka').on('change', function() {
		$('input[class=checkFukuoka]').prop('checked', this.checked);
	});
});

jqueryも相変わらず緩くしか理解してないので「attr」と「prop」の違いがよくわかってなかったのですが、こちらで詳しく解説してくれてました↓
jQueryにおけるattrとpropの違いと使いドコロまとめ

「attr」：属性における値 を取得
「prop」：checkedという プロパティの真偽 を取得

inputを使用するときは「prop」と憶えてた方がよいみたい。