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:
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?
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?
Please also mark the comments that contributed to the solution of the article
Content-Key: 188792
Url: https://administrator.de/contentid/188792
Printed on: April 20, 2024 at 16:04 o'clock
4 Comments
Latest comment
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...
Hoffe das hilft dir..
Uwe
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..
Uwe