azu · April 6, 2012 07:10
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style type="text/css">
        body {
            padding: 30px;
        }

        .input li {
            list-style-type: none;
        }

        #area1, #area2 {
            margin: 20px;
            padding: 30px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
        }
    </style>
 </head>
 <body>
 <div class="input">
    <ul>
        <li><label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="チェック1"><span>チェック1</span></label></li>
        <li><label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="チェック2"><span>チェック2</span></label></li>
        <li><label for="chk3"><input type="checkbox" id="chk3" name="chk3" value="チェック3"><span>チェック3</span></label></li>
    </ul>
 </div>
 <!-- / .input -->
 <div id="area1">
    <p>1</p>
 </div>
 <div id="area2">
    <p>2</p>
 </div>
 <script type="text/javascript">
    $(function () {
        function toggleByCheckbox(selector, target) {

            var $element = $(selector),
                    $target = $(target)
            // 初期化時に一度非表示にする
            $target.hide();
            $element.click(function () {
                // $elementの中で:checkedなelementを集めて返す
                var $collection = $element.map(function () {
                    if ($(this).is(':checked')) { // http://webtech-walker.com/archive/2010/04/06155654.html
                        return $(this);
                    }
                });
                console.log($collection);
                // targetが表示されてて かつ selectorで指定した要素にチェックが一つでもあるなら表示
                if ($target.css('display') === 'none' || $collection.length !== 0) {
                    $target.slideDown();
                } else {
                    $target.slideUp();
                }
            });
        }

        toggleByCheckbox('#chk1, #chk2', '#area1'); // 処理1
        toggleByCheckbox('#chk3', '#area2'); // 処理2
    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style type="text/css">
	body {
	padding: 30px;
	}

	.input li {
	list-style-type: none;
	}

	#area1, #area2 {
	margin: 20px;
	padding: 30px;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	}
	</style>
	</head>
	<body>
	<div class="input">
	<ul>
	<li><label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="チェック1"><span>チェック1</span></label></li>
	<li><label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="チェック2"><span>チェック2</span></label></li>
	<li><label for="chk3"><input type="checkbox" id="chk3" name="chk3" value="チェック3"><span>チェック3</span></label></li>
	</ul>
	</div>
	<!-- / .input -->
	<div id="area1">
	<p>1</p>
	</div>
	<div id="area2">
	<p>2</p>
	</div>
	<script type="text/javascript">
	$(function () {
	function toggleByCheckbox(selector, target) {

	var $element = $(selector),
	$target = $(target)
	// 初期化時に一度非表示にする
	$target.hide();
	$element.click(function () {
	// $elementの中で:checkedなelementを集めて返す
	var $collection = $element.map(function () {
	if ($(this).is(':checked')) { // http://webtech-walker.com/archive/2010/04/06155654.html
	return $(this);
	}
	});
	console.log($collection);
	// targetが表示されててかつ selectorで指定した要素にチェックが一つでもあるなら表示
	if ($target.css('display') === 'none' \|\| $collection.length !== 0) {
	$target.slideDown();
	} else {
	$target.slideUp();
	}
	});
	}

	toggleByCheckbox('#chk1, #chk2', '#area1'); // 処理1
	toggleByCheckbox('#chk3', '#area2'); // 処理2
	});
	</script>
	</body>
	</html>