✔ Buttonreihen in einer Matrix umschalten

Sprint · 12. Januar 2009

Hallo,

um mehrere Checkboxen auf ein Mal ein. oder auszuschalten gibt es jede Menge Scripte. Das sind aber immer nur einfache Listen. Bei einem Dachberechnungsprogramm kann es nun zu sehr großen, zweidimensionalen Tabellen kommen. (Siehe anhängendes Bild)
Um dem User viel Klickarbeit zu ersparen, wenn er ganze Reihen oder Spalten umschalten will, möchte ich ihm für jede Reihe bzw. Spalte einen Button anbieten, mit dem er das erledigen kann.
Die einzelnen Checkboxen sind so angelegt:

HTML:

<input type="checkbox" name="svmod[1][1]" value="2" checked onclick="abschalt()">

Hat da jemand was für mich?

Quaese · 13. Januar 2009

Hi,

du könntest das Ein-/Ausschalten von Zeilen/Spalten ebenfalls über Checkboxen realisieren. Diese enthalten im value-Attribut einen Wert, der sich wie folgt zusammensetzt:

richtung_index, wobei richtung = col oder row (Spalte oder Zeile), index = Nummer der Spalte bzw. Zeile

Die Funktion analysiert diesen zusammengesetzten Wert und setzt entsprechend die Checkboxen einer Zeile bzw. Spalte.

Beispiel:

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function abschalt(objElem){
  var arrSplit = objElem.value.split("_");
  var blnCheck = (objElem.checked)? true : false;
  var i = 1;
  var objCheckbox = null;

  // Zeilen
  if(arrSplit[0] == "row"){
    // Erste Checkbox ermitteln
    objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+i+"]")[0];
    // Solange Checkboxen existieren
    while(objCheckbox){
      // Checkbox wählen/abwählen
      objCheckbox.checked = blnCheck;
      // Zählvariable inkrementieren
      i++;
      // Nächste Checkbox ermitteln
      objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+i+"]")[0];
    }
  // Spalten
  }else if(arrSplit[0] == "col"){
    objCheckbox = document.getElementsByName("svmod["+i+"]["+arrSplit[1]+"]")[0];
    while(objCheckbox){
      objCheckbox.checked = blnCheck;
      i++;
      objCheckbox = document.getElementsByName("svmod["+i+"]["+arrSplit[1]+"]")[0];
    }
  }
}
 //-->
</script>
</head>
<body>
<table >
<tr>
 <td>&nbsp;</td>
 <td><input type="checkbox" name="svmod[0][1]" value="col_1" onclick="abschalt(this)"></td>
 <td><input type="checkbox" name="svmod[0][2]" value="col_2" onclick="abschalt(this)"></td>
 <td><input type="checkbox" name="svmod[0][3]" value="col_3" onclick="abschalt(this)"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[1][0]" value="row_1" onclick="abschalt(this)"></td>
 <td><input type="checkbox" name="svmod[1][1]" value="2"></td>
 <td><input type="checkbox" name="svmod[1][2]" value="2"></td>
 <td><input type="checkbox" name="svmod[1][3]" value="2"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[2][0]" value="row_2" onclick="abschalt(this)"></td>
 <td><input type="checkbox" name="svmod[2][1]" value="2"></td>
 <td><input type="checkbox" name="svmod[2][2]" value="2""></td>
 <td><input type="checkbox" name="svmod[2][3]" value="2"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[3][0]" value="row_3" onclick="abschalt(this)"></td>
 <td><input type="checkbox" name="svmod[3][1]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][2]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][3]" value="2"></td>
</tr>
</table>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

Sprint · 13. Januar 2009

Genau das, was ich gesucht habe! Herzlichen Dank dafür.

Sprint · 13. Januar 2009

Hi Quaese,

nach dem Einbau des Scripts ist mir aufgefallen, daß es nur in den Reihen funktioniert, die bei 1 anfangen und keine Lücken aufweisen. Ansonsten hört es bei der Lücke auf bzw. fängt erst gar nicht an wenn die Lücke auf 1 ist. Ein Austausch der while gegen eine for Schleife brachte überhaupt keine Änderung. Nach vielen try-and-error Versuchen bin ich dann auf diese Lösung gestoßen, die zwar funktioniert, aber wohl nicht der Weisheit letzter Schluß ist. Vielleicht kannst du mir ja sagen, warum das ursprüngliche Script an Lücken aufhört bzw. wie mein Umbau eleganter zu gestalten ist.

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function abschalt(objElem,typus,start,ende){
	var arrSplit = objElem.value.split("_");
	var blnCheck = (objElem.checked)? true : false;
	var j = 0;
	var i = 1;
	var objCheckbox = null;

	// Zeilen
	if(arrSplit[0] == "row"){
		for (i=0;i<=ende;i++){
			// Erste Checkbox ermitteln
			while (!objCheckbox && i<=ende){
				i++;
				objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+i+"]")[0];
			}
			// Solange Checkboxen existieren
			// Checkbox wählen/abwählen
			objCheckbox.checked = blnCheck;
			// wenn Checkbox fehlt
			while (!objCheckbox && i<=ende){
				i++;
				objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+i+"]")[0];
			}
			j=i+1;
			// Nächste Checkbox ermitteln
			objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+j+"]")[0];
		}
	// Spalten
	}else if(arrSplit[0] == "col"){
		for (i=0;i<=ende;i++){
			while (!objCheckbox && i<=ende){
				i++;
				objCheckbox = document.getElementsByName("svmod["+i+"]["+arrSplit[1]+"]")[0];
			}
			objCheckbox.checked = blnCheck;
			while (!objCheckbox && i<=ende){
				i++;
				objCheckbox = document.getElementsByName("svmod["+i+"]["+arrSplit[1]+"]")[0];
			}
			j=i+1;
			objCheckbox = document.getElementsByName("svmod["+j+"]["+arrSplit[1]+"]")[0];
		}
	}
}
 //-->
</script>
</head>
<body>
<table >
<tr>
 <td>&nbsp;</td>
 <td><input type="checkbox" name="svmod[0][1]" value="col_1" onclick="abschalt(this,2,3)"></td>
 <td><input type="checkbox" name="svmod[0][2]" value="col_2" onclick="abschalt(this,1,3)"></td>
 <td><input type="checkbox" name="svmod[0][3]" value="col_3" onclick="abschalt(this,1,3)"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[1][0]" value="row_1" onclick="abschalt(this,2,3)"></td>
 <td></td>
 <td><input type="checkbox" name="svmod[1][2]" value="2"></td>
 <td><input type="checkbox" name="svmod[1][3]" value="2"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[2][0]" value="row_2" onclick="abschalt(this,1,3)"></td>
 <td><input type="checkbox" name="svmod[2][1]" value="2"></td>
 <td></td>
 <td><input type="checkbox" name="svmod[2][3]" value="2"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[3][0]" value="row_3" onclick="abschalt(this,1,3)"></td>
 <td><input type="checkbox" name="svmod[3][1]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][2]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][3]" value="2"></td>
</tr>
</table>
</body>
</html>

chainy · 13. Januar 2009

Hi,

warum eigentlich so kompliziert? Mein Vorschlag setzt das prototype Framework voraus. Die Checkboxen, die zum An/Ausschalten von mehreren Checkboxen verwendet werden sollen, vergibst als erstes eine CSS-Klasse, in meinem nachfolgenden Beispiel habe ich die Klasse "abschalt" genannt. Das Skript ermittelt im onLoad-Event alle Checkboxen mit der Klasse "abschalt". Anschließend wird über das Resultat iteriert und der Name jeder gefundenen Checkbox wird inspiziert und für den späteren gebrauch als Selektor definiert. Wenn deine Checkbox z.B. 'svmod[0][0]' heisst, diese die CSS-Klasse "abschalt" besitzt und alle Checkboxen die im Namen 'svmod[0]' enthalten aktivieren bzw. deaktivieren soll, dann wird hierfür ein Selektor erstellt der wie folgt aussieht: 'input[type="checkbox"][name*="svmod[0]"]'.

Nicht vergessen, auf prototypejs.org gehen und die Bibliothek runterladen und einbinden.

Genügend bla bla, hier das Skript:

Code:

document.observe('dom:loaded', function(){
	var arrCheckboxes = $$('input[type="checkbox"].abschalt');
	
	arrCheckboxes.each(function(elCheckbox){
		var strName = elCheckbox.readAttribute('name');
		var arrPositions = [];
		strName.toArray().each(function(item, index){
			if( item === ']' )
			{
				this.push(index);
			}
		}.bind(arrPositions));
		
		var intCutAtPosition = strName.length;
		if( arrPositions.size() > 0 )
		{
			intCutAtPosition = arrPositions[ (arrPositions.size()-2 < 0) ? 0 : arrPositions.size()-2 ];
		}
		
		var strSelector = 'input[type="checkbox"][name*="' + strName.substr(0, intCutAtPosition+1) + '"]';
		
		elCheckbox.observe('click', abschalt.bind(elCheckbox, strSelector));
	});
});


function abschalt(strSelector)
{
	var arrCheckboxes = $$(strSelector);
	arrCheckboxes.each(function(elCheckbox){
		elCheckbox.checked = this.checked;
	}.bind(this));
}

Quaese · 13. Januar 2009

Hi,

du könntest im Funktionsaufruf als zweites Argument den Index der letzten Checkbox übergeben.

Die while-Schleife wird durch eine for-Schleife ersetzt. In jedem Durchlauf wird in einem try-catch-Block versucht, die Box zu wählen/abzuwählen.

Beispiel:

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function abschalt(objElem, intLastIndex){
  var arrSplit = objElem.value.split("_");
  var blnCheck = (objElem.checked)? true : false;
  var objCheckbox = null;

  // Zeilen
  if(arrSplit[0] == "row"){
    for(var i=0; i<=intLastIndex; i++){
      // Checkbox ermitteln
      objCheckbox = document.getElementsByName("svmod["+arrSplit[1]+"]["+i+"]")[0];
      try{
        // Checkbox wählen/abwählen
        objCheckbox.checked = blnCheck;
      }catch(objExc){}
    }
  // Spalten
  }else if(arrSplit[0] == "col"){
    for(var i=0; i<=intLastIndex; i++){
      // Checkbox ermitteln
      objCheckbox = document.getElementsByName("svmod["+i+"]["+arrSplit[1]+"]")[0];
      try{
        // Checkbox wählen/abwählen
      	objCheckbox.checked = blnCheck;
      }catch(objExc){}
    }
  }
}
 //-->
</script>
</head>
<body>
<table >
<tr>
 <td>&nbsp;</td>
 <td><input type="checkbox" name="svmod[0][1]" value="col_1" onclick="abschalt(this,4)"></td>
 <td><input type="checkbox" name="svmod[0][2]" value="col_2" onclick="abschalt(this,4)"></td>
 <td><input type="checkbox" name="svmod[0][3]" value="col_3" onclick="abschalt(this,4)"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[1][0]" value="row_1" onclick="abschalt(this,2)"></td>
 <td></td>
 <td><input type="checkbox" name="svmod[1][2]" value="2"></td>
 <td></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[2][0]" value="row_2" onclick="abschalt(this,4)"></td>
 <td><input type="checkbox" name="svmod[2][1]" value="2"></td>
 <td></td>
 <td><input type="checkbox" name="svmod[2][3]" value="2"></td>
</tr>
<tr>
 <td><input type="checkbox" name="svmod[3][0]" value="row_3" onclick="abschalt(this,4)"></td>
 <td><input type="checkbox" name="svmod[3][1]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][2]" value="2"></td>
 <td><input type="checkbox" name="svmod[3][3]" value="2"></td>
</tr>
</table>
</body>
</html>

Ciao
Quaese

Sprint · 13. Januar 2009

@Quaese: So funktioniert es prima. Vielen Dank nochmal.

@chainy: Im Moment reicht mir die andere Lösung, aber ich werde mich auf jeden Fall mit deiner Lösung auch beschäftigen. Auch dir vielen Dank.

✔ Buttonreihen in einer Matrix umschalten

Sprint

Erfahrenes Mitglied

Anhänge

Quaese

Moderator

Sprint

Erfahrenes Mitglied

Sprint

Erfahrenes Mitglied

chainy

Erfahrenes Mitglied

Quaese

Moderator

Sprint

Erfahrenes Mitglied

Neue Beiträge