April 6, 2012 06:58
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 (e,t){

 				var e = $(e),
 					t = $(t)

 				t.hide();

 				e.click(function(){
 					c = $(e + ':checked').length;
 					console.log(c);

 					if(t.css('display')=='none' || c!=0) {
 						t.slideDown();
 					} else {
 						t.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 (e,t){

	var e = $(e),
	t = $(t)

	t.hide();

	e.click(function(){
	c = $(e + ':checked').length;
	console.log(c);

	if(t.css('display')=='none' \|\| c!=0) {
	t.slideDown();
	} else {
	t.slideUp();
	};
	});
	};

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