<HTML>
<head>
<title></title>
<script type="text/javascript">
function cbChecked() {
hideAll(); //Hide all of the Divs
var cb = document.getElementsByTagName('input');
//Loop through all of the checkboxes and see if they are checked
for (var i=0; i<cb.length; i++)
{
if (cb[i].getAttribute('type') == "checkbox")
{
if (cb[i].checked==true)
{
//If the Current Checkbox is checked, show the div's specific to that one
whatToShow(cb[i].id);
}
}
}
}
function whatToShow(id) {
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
//Display Div's based on the checkbox ID
switch (id) {
case 'ARank':
d1.style.display = 'block';
break;
case 'BRank':
d2.style.display = 'block';
break;
case 'CRank':
d1.style.display = 'block';
d2.style.display = 'block';
break;
default:
break;
}
}
function hideAll() {
//I used a div around all the divs to allow for divs outside that will not be hidden
var parent = document.getElementById('enclosure');
//gets all child divs within the parent div
var child = parent.getElementsByTagName('div');
//loop through and hide all child divs
for (i = 0; i < child.length; i++) {
child[i].style.display = 'none';
}
}
</script>
</head>
<body>
<input type="checkbox" id="ARank" onclick="cbChecked()"> A Rank Jutsu
<input type="checkbox" id="BRank" onclick="cbChecked()"> B Rank Jutsu
<input type="checkbox" id="CRank" onclick="cbChecked()"> C Rank Jutsu
<div id="enclosure">
<div id="div1">ARank BRank weap element</div>
<div id="div2">space weap water</div>
</div>
</body>
</HTML>
