jQuery ausgewaehlte checkbox anzeigen

B

Bicko

Erfahrenes Mitglied
Hi,
Ich versuche mich gerade mit jQuery und stehe damit noch am Anfang. Meine Frage mag daher etwas zu einfach erscheinen, ich hoffe Ihr habt ein nachsehen.

Ok zu meinem Wunsch. Ich habe ein Formular und lese aus der DB eine Liste von Mitgliedern und Gruppennamen aus. Diese werden jeweils als Checkbox und Radiobutton ausgegeben. Habe ein Label gesetzt, so dass man nur auf den Namen klicken muss um die Checkbox oder den Radiobutton zu aktivieren. Soweit so gut, das ist ja nur HTML und PHP.

Nun wollte ich das wenn man einen Gruppennamen auswaehlt im unteren Bereich dieser erscheint. Das geht ja mit jQuery und ich habe diese funktionierende Loesung zusammengebastelt.

HTML: 
 function addGroupName(div) {
             jQuery("#sortable li").click(function(){
                 $('#GroupName').empty();
                 $("#GroupName").append($(this).text());
             });
        } ;

<li class="ui-state-default" onClick="addGroupName()" >
<label for ="'.$Groups['GroupD'].'">'.$Leaguename['GroupName'].'</label>
</li>

Danach wollte ich das Ganze auch fuer die Mitglieder zusammenbauen, doch da wird es kompliziert. Es sind ja checkboxen, das bedeutet man kann:
1. mehrere auswaehlen (sprich mein empty oben muss weg)
2. Auswahl aendern (sprich, der Wert muesste auch in der Liste wieder geloescht werden)

Mein Versuche sind bisher klaeglich gescheitert. Ehrlich gesagt scheitere ich schon beim ersten Punkt. Waehle 1 aus, 1 Wert wird unten angezeigt, waehle 2. aus, Wert wird unten 2 mal angezeigt, waehle 3 aus.... 3 Werte usw.

Kann mir jemand einen Tip geben, wie so etwas funktionieren koennte und wonach ich genau suchen muss? Ich weiss wirklich nicht, wo ich da anfangen muss. Freue mich ueber jede Antwort. Vielen Dank !!

Gruss Bicko
 
Moin,

denkbar wäre jenes:
Anstatt beim Klick direkt den Namen in die Liste zu Schreiben, iteriere über die Checkboxen/Radio-Buttons und prüfe für jedes, ob aktiviert...falls ja, erweitere die Liste.
(Eingangs die Liste natürlich leeren)

Ebenfalls denkbar:
Du bräuchtest einen Selektor, an dem du eine Beziehung zwischen den Boxen und den Namen in der Liste herstellen kannst.
Das gäbe dir die Möglichkeit:
1. beim aktivieren des Buttons zu schauen, ob der Eintrag schon in der Liste ist(und ihn in dem Fall nicht nochmals einzufügen)
2. beim deaktivieren einen Eintrag gezielt zu Löschen
 
Moin Sven,

Danke fuer Deine Antwort. Zu welcher Moeglichkeit wuerdest Du mir denn raten? Was waere einfacher umzusetzen, gerade fuer mich als totaler Anfaenger?
 
Die 1. wäre sicher einfacher umzusetzen.
Ob es sinnvoll ist, sie zu Verwenden, hängt davon ab, wieviele Mitglieder und Gruppennamen dort insgesamt zu Erwarten sind.

Werden es sehr viel, würde ich eher zu Variante 2 neigen, denn bei Variante 1 werden dann ja bei jedem Klick alle Boxen durchlaufen, was bei 100en davon schon einen Moment dauert.
 
Mmh, ok vielleicht waeren es 100 oder max 150. Ist sehr schwer zu sagen. Unter der 2. Loesung kann ich mir momentan einfach noch sehr wenig vorstellen. Vielleicht sollte ich es dann also mit Loesung 1 versuchen. Mal sehen ob ich das hinbekomme.
Vielen Dank nochmal.
 
Hier mal ein Beispiel für die 2. Variante:

Code: 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form>
<ul id="groups">
 <li>
  <label for ="gruppenid1">Gruppenname1</label><input type="checkbox" id="gruppenid1">
 </li>
 <li>
  <label for ="gruppenid2">Gruppenname2</label><input type="checkbox" id="gruppenid2">
 </li>
 <li>
  <label for ="gruppenid3">Gruppenname3</label><input type="checkbox" id="gruppenid3">
 </li>
 <li>
  <label for ="gruppenid4">Gruppenname4</label><input type="checkbox" id="gruppenid4">
 </li>
</ul>
</form>
<ul id="grouplist" style="list-style-type:none"></ul>
<script type="text/javascript">
<!--

function addGroupName(li) 
{
  var o=$($(li).find('input:checkbox').get(0));
  var i=o.attr('id');
  var s=$($(o.parent().get(0)).find('label').get(0)).text();
  $('#grouplist li[title='+i+']').remove();
  if(o.attr('checked'))
  {
    $('<li/>').attr('title',i).text(s).appendTo('#grouplist');
  }
  
}
document.forms[0].reset();
$('#groups li').click(function(){addGroupName(this);})
//-->
</script>
</body>
</html>

Dem Eintrag in der Liste wird als title-Attribut die ID der checkbox gegeben, so hat man den nötigen Selektor.
Das betreffende Element wird generell erstmal entfernt(zumindest versucht, dies zu Tun), und sollte die Checkbox aktiviert sein, in die Liste eingefügt...das wars schon :)
 
Hallo Sven,

Vielen, vielen Dank. Dein Beispiel funktioniert wirklich prima, aber ob ich jemals darauf gekommen waere ist wirklich mehr als fraglich. Das sieht schon sehr nach "advanced" aus. Ich muss mich da wirklich noch in die Materie jQuery reinarbeiten. Die Moeglichkeiten damit sind einfach genial, auch wenn ich es jetzt nur als einen kleinen Effekt ohne wirklichen Nutzen benuzte, da ich ja immer noch mit dem normalen Formular arbeiten werde und das wirklich nur als kleine Uebersicht nehme. Aber ist schon wirklich Klasse. Nochmal vielen Dank fuer Deine Hilfe.

Gruss Bicko
 
Das ist keineswegs "advanced".

Wenn man ein wenig weiss, wie jQuery funktioniert und was es kann, dann ist das recht einfach :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück