Brett vorm kopp... [JS] [ARRAY]

[wissenwill]

Hallo!

Möchte eine checkbox hinzufügen - geht aber irgendwie nicht :-( sobald mehr als eine gecheckt ist, funktioniert nichts mehr... Ist bestimmt ganz einfach zu lösen hab aber so ein großes Brett vorm kopp das ich nicht drauf komme :-)

<script type="text/javascript">
function displayArrayContent(thewhat) {
var x = document.forms["myForm"];
var checkedBoxes = '';
var thearrays = new Array();
 if (x.elements["[Category][01]"].checked == true) {
  checkedBoxes = "block";
 }
 else if (x.elements["[Category][02]"].checked == true) {
  checkedBoxes = "block";
 }

else if (x.elements["[Category][03]"].checked == true) {
  checkedBoxes = "block";
 }

else {
  checkedBoxes = "none";
 }
 thearrays = thewhat.split("|");
 for (var i = 0; i < thearrays.length; i++) {
  if (document.getElementById) {
  document.getElementById(thearrays[i]).style.display = checkedBoxes;
  }
 }
}
</script>
<form action="#" method="post" name="myForm">
<input type="checkbox" name="[Category][01]" value="01" onclick="displayArrayContent('cat1|cat2')" /> Channel 1<br/>
<input type="checkbox" name="[Category][02]" value="02" onclick="displayArrayContent('cat1|cat3|cat4')" /> Channel 2<br/>
<input type="checkbox" name="[Category][03]" value="03" onclick="displayArrayContent('cat2|cat3')" /> Channel 3<br/>
<hr />
<div style="display: none" id="cat1">
 <input type="checkbox" name="[Category][1]" value="cat1" /> Category 1
</div>
<div style="display: none;" id="cat2">
 <input type="checkbox" name="[Category][2]" value="cat2" /> Category 2
</div>
<div style="display: none;" id="cat3">
 <input type="checkbox" name="[Category][3]" value="cat3" /> Category 3
</div>
<div style="display: none;" id="cat4">
 <input type="checkbox" name="[Category][4]" value="cat3" /> Category 4
</div>
</form>

[Thorsten F.]

Hi,
was genau möchtest du erreichen? Habe den Code kopiert und getestet, aber ich weiß jetzt nicht, ob das, was ich dann sehe, richtig ist.

Was genau heißt: "Möchte eine checkbox hinzufügen - geht aber irgendwie nicht ". Erläutere das mal ein wenig.

Gruß,
Thorsten F.

[wissenwill]

Hi,
was genau möchtest du erreichen? Habe den Code kopiert und getestet, aber ich weiß jetzt nicht, ob das, was ich dann sehe, richtig ist.

Wenn ich jede checkbox einzelnd (channel1 on, channel2 off, channel3 off  || channel1 off, channel2 on, channel3 off usw...) auswähle funktioniert das script soweit, wie ich mir das vorstelle - jedem channel werden die entsprechenden kategorien hinzugefügt.

Was genau heißt: "Möchte eine checkbox hinzufügen - geht aber irgendwie nicht ". Erläutere das mal ein wenig.

Mit checkbox hinzufügen meinte ich, einen neuen Channel hinzufügen, diese hier:

<input type="checkbox" name="[Category][01]" value="01" onclick="displayArrayContent('cat1|cat2')" /> Channel 1<br/>
<input type="checkbox" name="[Category][02]" value="02" onclick="displayArrayContent('cat1|cat3|cat4')" /> Channel 2<br/>
<input type="checkbox" name="[Category][03]" value="03" onclick="displayArrayContent('cat2|cat3')" /> Channel 3<br/>
usw...

da dachte ich mir ich kopiere einfach die show/hide

if (x.elements["[Category][01]"].checked == true) {
 checkedBoxes = "block";
}

funktion und dann wird das schon hinhauen...

Problem bei dem Script ist, dass das "unchecken" mit dieser Methode nicht funktioniert...

wenn channel 1 gewählt dann zeige category1 und 2
wenn channel 1 und channel2 gewählt, dann zeige category 1, 2, 3, 4
wenn channel 1 und channel3 gewählt, dann zeige category 1, 2, 3

Hoffe konnte mich etwas verständlicher ausdrücken - wie gesagt: Brett vorm Kopp und daher betriebsblind :-)

gruß
 -w

[rfb]

Moin
 > Hallo!

Möchte eine checkbox hinzufügen - geht aber irgendwie nicht :-( sobald mehr als eine gecheckt ist, funktioniert nichts mehr... Ist bestimmt ganz einfach zu lösen hab aber so ein großes Brett vorm kopp das ich nicht drauf komme :-)

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.

So ähnlich könnte das dann aussehen (habs nicht getestet)

<script type="text/javascript">
function displayArrayContent() {
if (!document.getElementById) return;
var x=document.getElementsByTagName("div");
for (var i=0;i<x.length;i++) {
if (x[i].id.indexOf("cat")>-1) x[i].style.display="none";
}
x=document.forms["myForm"].elements["category"];
var kanal="";
for (i=0;i<x.length;i++) {
if (x[i].checked) kanal+=x[i].value;
}
kanaele = kanal.split("|");
for (i=0;i<kanaele.length; i++) {
document.getElementById(kanaele[i]).style.display=block;
}
}
window.onload=function () {
displayArrayContent()
}
</script>
<form action="#" method="post" name="myForm">
<input type="checkbox" name="category" value="cat1|cat2" onchange="displayArrayContent()" /> Channel 1<br/><input type="checkbox" name="category" value="cat1|cat2|cat3" onchange="displayArrayContent()" /> Channel 2<br/>
...

<hr />
<div id="cat1">
<input type="checkbox" name="[Category][1]" value="cat1" /> Category 1
</div>
...
</form>

Gruß
rfb

[wissenwill]

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>

[rfb]

Moin

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!

du hast ein neues Brett eingefügt - nämlich eine Barriere für alle Menschen, die JavaScript nicht zur Verfügung haben. Die können nämlich anklicken was sie wollen - es passiert gar nix.
Bei meinem Vorschlag waren die entscheidenden Felder ("Kanäle") wenigstens von Anfang an in einem solchen Fall zu sehen.

Außerdem ist deine Löung nach wie vor recht träge bezüglich Erweiterungen (musst du von Hand im JavaScript-Code ergänzen). Das ist alles andere als sinnvoll.

Gruß
rfb