nicht angemeldet
Es ist immer sinnvoller JavaScript arbeiten zu lassen - in diesem Fall kann das Script sich die Werte direkt aus den values holen. Das erhöht die Übersicht.
Zusammengehörende Checkboxen haben das gleiche name-Attribut!
onChange ist besser als onClick, da letzteres nur auf die MAus reagiert, ersteres auch auf die Tastatur.
Danke für deine Antwort! Habe das Brett vorm Kopp wohl beim nochmal drüber schlafen irgendwo verloren :-) und eine Lösung des Problems gefunden!
Hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Template</title>
<style type='text/css'>
#cat1, #cat2, #cat3, #cat4 {
display: none;
}
</style>
<script type='text/javascript'>
function cbOnClick()
{
var c1, c2, c3, c4, b = 'block', n = 'none';
c1 = c2 = c3 = c4 = false;
var e = document.forms['myForm'].elements;
if (e['[Category][01]'].checked) {
c1 = c2 = true;
}
if (e['[Category][02]'].checked) {
c1 = c3 = c4 = true;
}
if (e['[Category][03]'].checked) {
c2 = c3 = true;
}
document.getElementById('cat1').style.display = c1 ? b : n;
document.getElementById('cat2').style.display = c2 ? b : n;
document.getElementById('cat3').style.display = c3 ? b : n;
document.getElementById('cat4').style.display = c4 ? b : n;
}
window.onload = function()
{
var e = document.forms['myForm'].elements;
e['[Category][01]'].onclick = cbOnClick;
e['[Category][02]'].onclick = cbOnClick;
e['[Category][03]'].onclick = cbOnClick;
cbOnClick(); // handle default checks
}
</script>
</head>
<body>
<form action="#" method="post" name="myForm">
<p><input type="checkbox" name="[Category][01]" value="01"> Channel 1</p>
<p><input type="checkbox" name="[Category][02]" value="02"> Channel 2</p>
<p><input type="checkbox" name="[Category][03]" value="03"> Channel 3</p>
<hr>
<div id="cat1">
<input type="checkbox" name="[Category][1]" value="cat1"> Category 1</div>
<div id="cat2">
<input type="checkbox" name="[Category][2]" value="cat2"> Category 2</div>
<div id="cat3">
<input type="checkbox" name="[Category][3]" value="cat3"> Category 3</div>
<div id="cat4">
<input type="checkbox" name="[Category][4]" value="cat3"> Category 4</div>
</form>
</body>
</html>