maik87
Goto Top

Mehrere Checkboxen aktiven deaktivieren Denkansatz

Hallo Leute,
ich als JS-Anfänger brauche mal einen Denkansatz.

Ich möchte eine Seite mit vielen Checkboxen anzeigen. Wird nun die oberste Checkbox aktiviert, so sollen alle drunterliegenden ebenfalls aktiviert werden. Andersrum bei Deaktivierung ebenfalls.

Nun sehen meine Checkboxen so aus:
<input type="checkbox" name="OrgID" value="0">  
<input type="checkbox" name="OrgID" value="1">  
<input type="checkbox" name="OrgID" value="10">  
<input type="checkbox" name="OrgID" value="11">  
<input type="checkbox" name="OrgID" value="12">  
<input type="checkbox" name="OrgID" value="2">  
<input type="checkbox" name="OrgID" value="20">  
<input type="checkbox" name="OrgID" value="21">  

Die mit value=0 soll alle ansprechen, die mit 1 nur die, die mit 1 beginnen usw.

Wie bekomme ich nun die Boxen angesprochen, die alle den gleichen Namen haben? Gibt es sowas wie Value like 1% oder sowas?

Content-Key: 188792

Url: https://administrator.de/contentid/188792

Printed on: April 20, 2024 at 16:04 o'clock

Member: godlie
godlie Jul 30, 2012 at 08:21:25 (UTC)
Goto Top
Hi,

ein kleiner Denkanstoß verpass denen halt eine ID, lies dir beim Seitenladen alle IDS mit values in ein Array durchlaufe das array bei passenden IDS attribute setzen.
Member: Maik87
Maik87 Jul 30, 2012 at 08:33:41 (UTC)
Goto Top
Ähm...
Klingt nicht einfach - aber ich versuche mich mal dran.
Member: colinardo
colinardo Jul 30, 2012 at 15:38:42 (UTC)
Goto Top
Hier noch ein Lösungsvorschlag mit jQuery und zusätzlichen Klassen für die Checkboxen:
Die Checkboxen die mehrere untergeordnete mitauswählen sollen versiehst du mit dem Klassennamen "main" und die jeweils untergeordneten mit "sub-x" wobei das "x" mit der ersten Ziffer von value gefüllt werden sollte...
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Checkbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){
	$(':checkbox[name="OrgID\\[\\]"].main').change(function(){  
		var val = $(this).attr("value");  
	
			//die 0 für die Auswahl aller Elemente abfangen 
			if (val !== "0"){  
				if ($(this).attr("checked")){  
					$('.sub-' + val).attr("checked","checked");  
				}else{
					$('.sub-' + val).removeAttr("checked");  
				}
			}else{	//für die Auswahl aller Elemente
				if ($(this).attr("checked")){  
					$(':checkbox[name="OrgID\\[\\]"]:gt(0)').attr("checked","checked");  
				}else{
					$(':checkbox[name="OrgID\\[\\]"]:gt(0)').removeAttr("checked");					  
				}
			}
	});
});
</script>
</head>

<body>
<input type="checkbox"  class="main" name="OrgID" value="0">  
0<br>
<input type="checkbox" class="main" name="OrgID" value="1">  
1<br>
<input type="checkbox" class="sub-1" name="OrgID" value="10">  
10<br>
<input type="checkbox" class="sub-1" name="OrgID" value="11">  
11<br>
<input type="checkbox" class="sub-1" name="OrgID" value="12">  
12<br>
<input type="checkbox" class="main" name="OrgID" value="2">  
2
<br>
<input type="checkbox" class="sub-2" name="OrgID" value="20">  
20
<br>
<input type="checkbox" class="sub-2" name="OrgID" value="21">   
21
</body>
</html>

Hoffe das hilft dir..
face-smile Uwe
Member: Maik87
Maik87 Aug 02, 2012 at 15:23:40 (UTC)
Goto Top
Klingt auch sehr interessant...
Leider hab ich mein Beispiel nur oberflächlich beschrieben und nicht detailliert.

Ich habe mehr als zwei Ebenen. Genau genommen sechs. Um dein Beispiel umzuswitchen bin ich scheinbar zu blöd face-sad Ich möchte jetzt auch nicht eure Freizeit in Anspruch nehmen und mir das von euch fertig machen lassen. Daher muss ich mir wohl eine andere Lösung ausdenken. JavaScript ist wohl derzeit noch nicht genug vertieft bei mir.