JQueryでチェックボックス全選択 その２

メモ

```html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>全選択　ケース２</title>
        <script src="/jq-plugin/jquery/jquery-1.10.2.js">
            			<!-- jquery 1.10.2 -->
        </script>
        <script>
			$(document).ready(function() {

				$.fn.checkbox = function(args) {
				    
				    function checkClassById(className) {
				        for (var i in className) {
                            var checked = true;
                            $("." + className[i]).each(function() {
                                checked = checked && $(this).prop("checked");
                                $("#" + className[i]).prop("checked", checked);
                                checkClassById(($("#" + className[i]).attr("class") || "dummy").split(" "));
                            });
				        }
				    }

					$(this).change(function() {

                        checkClassById(($(this).attr("class") || "dummy").split(" "));
						var checked = $(this).prop("checked");
						$("." + $(this).attr("id")).each(function() {
							if (checked != $(this).prop("checked")) {
								$(this).click();
							}
						});
					});
				};

				// セレクタ変更
				$("#group1 input:checkbox").checkbox();
			});
        </script>
        <style>
        </style>
    </head>
    <body>
        <div id="group1">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <input type="checkbox" id="area01"/>
                            <label>北海道</label>
                        </dt>
                        <dd>
                            <dl>
                                <dt>
                                    <input type="checkbox" class="area01" id="area0101"/>
                                    <label>札幌市</label>
                                </dt>
                                <dd>
                                    <input type="checkbox" class="area0101" id="area010101">
                                    <label>中央区</label>
                                </dd>
                                <dd>
                                    <input type="checkbox" class="area0101" id="area010102">
                                    <label>北区</label>
                                </dd>
                                <dd>
                                    <input type="checkbox" class="area0101" id="area010103">
                                    <label> 南区</label>
                                </dd>
                                <dd>
                                    <input type="checkbox" class="area0101" id="area010104">
                                    <label>東区</label>
                                </dd>
                                <dd>
                                    <input type="checkbox" class="area0101" id="area010105">
                                    <label>西区</label>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <input type="checkbox" class="area01" id="area0102"/>
                                    <label>江別市</label>
                                </dt>
                            </dl>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </body>
</html>
```