Checkboxs which contain 'All' checkbox

checkboxOptionAll.js

/**
 * If you click 'All' checkbox, other checkboxs are cancelled.
 */

/* HTML Sample Code: Checkboxs which contains 'All' checkbox. */
// <input type="checkbox" name="hdBox" id="hdBoxAll" value="30000" onclick="checkHdBoxes(this);" checked /><label for="hdBoxAll">전체</label>
// <input type="checkbox" name="hdBox" id="hdBox1" value="30110" onclick="checkHdBoxes(this);" /><label for="hdBox1">지역1</label>
// <input type="checkbox" name="hdBox" id="hdBox2" value="30140" onclick="checkHdBoxes(this);" /><label for="hdBox2">지역2</label>
// <input type="checkbox" name="hdBox" id="hdBox3" value="30170" onclick="checkHdBoxes(this);" /><label for="hdBox3">지역3</label>
// <input type="checkbox" name="hdBox" id="hdBox4" value="30200" onclick="checkHdBoxes(this);" /><label for="hdBox4">지역4</label>	
// <input type="checkbox" name="hdBox" id="hdBox5" value="30230" onclick="checkHdBoxes(this);" /><label for="hdBox5">지역5</label>

function checkHdBoxes(box) {
	
	if (box.id != "hdBoxAll") {
		$('#hdBoxAll').prop("checked", false);
	} else {
		$('input[name=hdBox]:not("#hdBoxAll")').each(function() {
			$(this).prop('checked', false);
		});
		/* Above code is same as the following. */
//		$('#hdBox1').prop("checked", false);
//		$('#hdBox2').prop("checked", false);
//		$('#hdBox3').prop("checked", false);
//		$('#hdBox4').prop("checked", false);
//		$('#hdBox5').prop("checked", false);
	}
	
	if ($('input[name=hdBox]:checked').length == 0) {
		$('#hdBoxAll').prop("checked", true);
	}
}