CSS checkbox Style verändern

Azzael · 25. November 2016

Rahmenbedingungen

zusätzliche Techniken:Javascript, PHP, CSS
Browser & Betriebssystem:Firefox, Windows 7

Editor: Eclipse

Problembeschreibung
Ich habe auf einem Formular einige Checkboxen mit normaler Funktion. Desweiteren eine variable Anzahl Checkboxen welche neben der normalen Funktion auch eine Doppelklick Funktion haben (Doppelklick wählt alle Checkboxen mit gleichem Ziel aus). Nun möche ich den Style aller Checkboxen dahingehend ändern das kein Haken gesetzt wird sondern die Checkbox blau gefüllt wird mit weißem Rand. Dies habe ich bereits auf verschiedene Arten geschafft, aber dann funktioniert die Doppelklick Funktion nicht mehr.

Code:

Beispiel meiner Lösung zur Style Veränderung

CSS

/*entfernen des Standart-Styles */	input[type='checkbox']:checked,	input[type='checkbox']:not(:checked) {		background: transparent;		position: relative;		opacity:0;		margin:0;		padding:0;	}/* einfügen des neuen Styles */	input[type='checkbox']:checked + label::before,	input[type='checkbox']:not(:checked) + label::before {		content:' ';		display:inline-block;		width: 15px;		height:15px;		position: relative;		top:4px;		border: 1px solid #bbb;		background: white;		margin-right: .15em;		box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);	}	input[type='checkbox']:checked  + label::before {	  background:blue;	  box-shadow: inset 0 0 0 1px white;	}

Sempervivum · 25. November 2016

So etwas habe ich schon mehrfach gemacht, indem ich die Checkbox unsichtbar gemacht habe und das neue Symbol in einem Label als Hintergrund gesetzt habe. Den Hintergrund kann man dann auf Grund des :checked umschalten. Dann musst Du natürlich auch das dblclick-Event auf das Label registrieren.
Edit: Ich sehe gerade, dass du das mit dem Label ja schon gemacht hast. Bleibt das Problem mit den Doppelklick: Wie gesagt, du musst den Listener für das Label registrieren und dann durch Navigieren im DOM auf die richtigen Elemente wirken lassen.

Azzael · 25. November 2016

Oh ok, danke. Kannst du mir da eventuell ein Beispiel geben wie sowas aussehen würde?

Sempervivum · 25. November 2016

Dazu müsste man wissen, wie das Umfeld aussieht: Du schreibst: "Doppelklick wählt alle Checkboxen mit gleichem Ziel aus" - wie ist das gemeint? Sind den Checkboxes Links zugeordnet. Am besten postest Du ein kleines Beispiel, wo alles drin ist, was man für die Realisierung braucht.

Azzael · 25. November 2016

Das einfachste Beispiel wäre:

Drei Checkboxen untereinander. Wenn ich einen Doppelklick auf eine davon mache werden alle angewählt.

Sempervivum · 25. November 2016

So funktioniert's:

Code

<input id="cb1" type="checkbox" value="Opt1"><label for="cb1">Option 1</label><br>        <input id="cb2" type="checkbox" value="Opt1"><label for="cb2">Option 2</label><br>
        <input id="cb3" type="checkbox" value="Opt1"><label for="cb3">Option 3</label><br>
        <script>
            $("input[type='checkbox'] + label").on("dblclick", function () {
                $("input[type='checkbox']").prop("checked", true);
            })         </script>

Azzael · 26. November 2016

Zusammen mit meinen oben geschriebenen CSS Einstellungen funktioniert es nicht (zumindest in Fiddle).

Achso ich habe noch vergessen. Zuvor eine weitere Checkbox auch mit dem neuen Design wo die Doppelklick funktion aber nicht gehen darf.

Das wäre dann grob umschrieben mein komplettes Problem.

Sempervivum · 26. November 2016

Ich habe beim Testen dein CSS verwendet. Ich habe jQuery benutzt. Hast Du jQuery eingebunden?

Azzael · 26. November 2016

ah natürlich nicht. Habe ich bisher auch noch nicht mit gearbeitet. In welchem Part muß ich das einbinden?

Sempervivum · 26. November 2016

Auf jeden Fall vor dem Javascript. Am besten im Head.

Sempervivum · 26. November 2016

" Zuvor eine weitere Checkbox auch mit dem neuen Design wo die Doppelklick funktion aber nicht gehen darf."
Auch das ist einfach:

Code

<input class="dblclick" id="cb1" type="checkbox" value="Opt1"><label for="cb1">Option 1</label><br>        <input class="dblclick" id="cb2" type="checkbox" value="Opt2"><label for="cb2">Option 2</label><br>
        <input class="dblclick" id="cb3" type="checkbox" value="Opt3"><label for="cb3">Option 3</label><br>
        <input id="cb4" type="checkbox" value="Opt4"><label for="cb4">Option 4</label><br>
        <script>
            $("input.dblclick + label").on("dblclick", function () {
                $("input.dblclick").prop("checked", true);
            })         </script>

Edit: Das Forum verschluckt teilweise die Zeilenumbrüche. Scrolle nach rechts.

Azzael · 1. Dezember 2016

Dann müßte es doch eigentlich so funktionieren:

Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
				$("input.dblclick + label").on("dblclick", function () {
            		$("input.dblclick").prop("checked", true);
       			 })
</script>




<style type="text/css">
/*entfernen des Standart-Styles */




	input[type='checkbox']:checked,
	input[type='checkbox']:not(:checked) {
		background: transparent;
		position: relative;
		opacity:0;
		margin:0;
		padding:0;
	}
/* einfügen des neuen Styles */
	input[type='checkbox']:checked + label::before,
	input[type='checkbox']:not(:checked) + label::before {
		content:' ';
		display:inline-block;
		width: 15px;
		height:15px;
		position: relative;
		top:4px;
		border: 1px solid #bbb;
		background: white;
		margin-right: .15em;
		box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
	}
	input[type='checkbox']:checked  + label::before {
	  background:blue;
	  box-shadow: inset 0 0 0 1px white;
	}
</style>
<input class="dblclick" id="cb1" type="checkbox" value="Opt1"><label for="cb1">Option 1</label><br>
<input class="dblclick" id="cb2" type="checkbox" value="Opt2"><label for="cb2">Option 2</label><br>
<input class="dblclick" id="cb3" type="checkbox" value="Opt3"><label for="cb3">Option 3</label><br>
<input id="cb4" type="checkbox" value="Opt4"><label for="cb4">Option 4</label><br>

Alles anzeigen

Habe es auf Js.do getestet und JQuery 3.1 ist ja eingebunden. Aber keine Funktion ausser die normale checkbox Funktion.

Sempervivum · 1. Dezember 2016

Du musst das Skript hinter die Definition der Inputs legen, sonst sind diese noch nicht definiert, wenn es ausgeführt wird.
Außerdem funktioniert es nicht, wenn Du bei einem Script-Tag sowohl eine src angibst als auch Anweisungen notierst.

Azzael · 1. Dezember 2016

ok super es funktioniert. vielen lieben dank. Mal schauen ob ich jetzt mein problem gelöst bekomme.

Azzael · 1. Dezember 2016

Wäre dann diese Funktion korrekt?

Code

$(document).ready(function() {
	$('#flytab input[type=checkbox] + label').dblclick(function() {
    	select_same_fleets_by_color($(this).val())
	});
});

oder muss sie so aussehen:

Code

$(document).ready(function() {
            $("#flytab input[type='checkbox'] + label").on("dblclick", function () {
                select_same_fleets_by_color($(this).val())
            });
});

Sempervivum · 1. Dezember 2016

Ja, mit document-ready geht es auch.

CSS checkbox Style verändern

Jetzt mitmachen!

Teilen