<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: F5F5DC ; }
.green{ background: F5F5DC ; }
.blue{ background: F5F5DC ; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
if($(this).attr("value")=="green"){
$(".green").toggle();
}
if($(this).attr("value")=="blue"){
$(".blue").toggle();
}
});
});
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
</div>
<div class="red box">
<input type="checkbox" name="Price1" value="1">Price 1<br>
<input type="checkbox" name="Price2" value="2">Price 2<br>
<input type="checkbox" name="Price3" value="3">Price 3<br>
</br></br></br></div>
<div class="green box">
<input type="checkbox" name="Price1" value="1">Price 1<br>
<input type="checkbox" name="Price2" value="2">Price 2<br>
<input type="checkbox" name="Price3" value="3">Price 3<br>
</br></br></br></div>
<div class="blue box">
<input type="checkbox" name="Price1" value="1">Price 1<br>
<input type="checkbox" name="Price2" value="2">Price 2<br>
<input type="checkbox" name="Price3" value="3">Price 3<br>
</br></br></br></div>
</body>
</html>