Checkboxen mit Jquery oder CSS

[overHead]

Hallo Leute,

ich brauche mal eure Hilfe.

Und zwar will ich ein Checkbox Menu machen mit 5 Checkboxen.
Dann will ich das wenn eine Checkbox angewählt ist die anderen ausgeblendet werden.
Sobald dann die eine Checkbox wieder abgewählt ist sollen die anderen Checkboxen wieder eingeblendet werden.

Ich habe schon CSS probiert:

input[type=checkbox]#opt_231_0:checked ~ span input#opt_231_1 {
    display:none;
}

Ich habe es schon mit Jquery probiert, extra ohne onclick event, da man ja der checkbox nicht ein onclick event zu teilen kann. Hier bei dem Fall müsste ich für jede Checkbox eine seperate Funktion schreiben, da das ja bei jeder Checkbox funktionieren soll.

<script>
$(document).ready(function(){
if ($('#opt_231_0').is(:checked)) {
   $('#opt_231_1').hide();
} else {
   $('#opt_231_1').show();
}
});
</script>

Ich hoffe mir kann jemand helfen.
Google hilft mir zwar aber komischerweise in Verbindung mit Contao geht das nicht.

Bis dahin

[baumannsv]

Hallo overhead,

für diesen Fall könnte eventuell folgende Erweiterung passen.
https://github.com/terminal42/contao...onalformfields

Mit freundlichen Grüßen Sven Baumann

[Andreas]

Ich habs mal mit MooTools gemacht, weil das am einfachsten und am leichtesten zu lesen ist:

// MooTools
(function($) {
  window.addEvent('domready', function() {

    var checkboxes = $$('.checkbox');

    checkboxes.addEvent('change', function() {
      if(this.checked) {
        checkboxes.getParent('span').addClass('invisible');
        this.getParent('span').removeClass('invisible');
      }
      else {
        checkboxes.getParent('span').removeClass('invisible');
      }
    });

  });
})(document.id); 

[overHead]

Also Baumann, das hab ich schon probiert, aber das funktioniert wenn du eine Checkbox hast die etwas versteckt. Ich habe aber 5 Optionen und wenn eine Option angeklickt ist sollen einfach nur die 4 anderen Optionen ausgeblendet werden, wenn das die eine wieder abgewählt wird sollen die 4 anderen wieder angezeigt werden. und dann soll mit jeder Option so funktionieren.

Andreas:
Also jetzt muss das noch funktionieren, dass nur die Gruppe von Checkboxen davon betroffen ist und was nicht schön ist das die anderen so weit weggehen, das die eine Checkbox nicht an seiner Position bleibt.

[Andreas]

Also jetzt muss das noch funktionieren, dass nur die Gruppe von Checkboxen davon betroffen ist und was nicht schön ist das die anderen so weit weggehen, das die eine Checkbox nicht an seiner Position bleibt.

Ein bisschen was kannst du ja auch noch selber machen, vor allem, wenn du keinen Link zur Seite zeigst.

Für die Gruppe musst du halt den Selektor ".checkbox" dementsprechend anpassen.

Der Rest ist CSS.

[overHead]

Habe es hin bekommen man kann einfach noch ne class davor setzen. Und ja Rest ist css.

Danke für die Hilfe, ein Link ist schwierig wenn das alles noch nicht offiziell ist.

Gesendet von meinem D5503 mit Tapatalk

[overHead]

Hallo Leute,

ich habe mal noch was ausprobiert und irgendwie funktioniert das nicht.

<script> 
(function($) { window.addEvent('domready', function() { 
	var checkboxes = $$('.g1 .checkbox'); 
	checkboxes.addEvent('change', function() { 
		if(this.checked) { 
			checkboxes.getParent('span').addClass('invisible'); 
			this.getParent('span').removeClass('invisible');

			$('price').addClass('nodisplay');

		} 
			else { 
				checkboxes.getParent('span').removeClass('invisible');} 
		
	}); 
	
}); 
})(document.id); 
</script>

Im Code habe ich

$('price').addClass('nodisplay');

eingefügt aber irgendwie will er mir das nicht Element ausblenden.
Die Class "nodisplay" ist auch gestylt.

Hat jemand eine Idee was ich falsch mache?

[baumannsv]

wenn price eine Klasse Must du einen Punkt benutzen wie in css


Gesendet von meinem iPhone mit Tapatalk

[overHead]

Moin Sven,

ist eine ID, also passt.

Komischerweise ist es, wenn ich bei addClass "invisible" nehme, blendet er es aus.
Wenn ich bei addClass "nodisplay" nehme blendet er nicht aus, obwohl hinter nodisplay einfach nur der Style display: none; steht.

Hat dafür einer eine Erklärung?

[baumannsv]

hast du das Element im Browser untersucht und bekommt dieses wirklich diese Klasse. Stimmt klasse Namen überein?


Gesendet von meinem iPhone mit Tapatalk

[overHead]

also klappen tut nun alles, aber ich habe gerade gesehen das er bei nodisplay versucht den alten display Style zu überschreiben und das funktioniert nicht, weil davor schon display block gesetzt wird, aber mit invisible geht es ja auch.

Aber Übung macht den Meister, weil wollte das mit Jquery machen da hat gar nichts funktioniert. mhh

[Andreas]

Na ja, wenn die Klasse nodisplay aufgesetzt wird, dann hat dein JS ja funktioniert, der Rest ist CSS, stärke der Selektoren usw.

Ja, mit jQuery ist sowas meisten schwieriger. Manchmal scheitert es daran, dass du nicht this nehmen darfst, sondern $(this) nehmen musst.

@baumannsv: wenn price ne Klasse gewesen wäre, dann wäre auch das einfache $-Zeichen falsch gewesen. Das einfache $ ist nur ein ID-Selektor, liefert also immer genau ein Element, während $$ eine Sammlung von Elementen liefert.