Wie Gruppen von Checkboxen, die sich gegenseitig beeinflussen

Sorry für den zweideutigen Titel, aber es ist ziemlich schwer zu kondensieren, was ich versuche zu tun, in ein paar Worten. Hier ist genau das, was ich versuche zu tun:

Ich möchte eine Reihe von Gruppen von Checkboxen. Würde man sein Geschlecht, mit Checkboxen für Männer und Frauen, wäre eine Region, mit Checkboxen für Norden, Osten, Süden und Westen und so weiter.

Ziel ist es, dem Benutzer zu wählen, sagen wir, Männlich oder Weiblich, aber sobald Sie setzen Sie ein Häkchen in eine checkbox einer anderen Gruppe, z.B. der Region Checkboxen, alle Ihre bisherigen "Kontrollen" aus allen anderen Gruppen entfernt.

Der Punkt ist, dass nur die Benutzer zur Auswahl von einer Gruppe von Checkboxen in einer Zeit.

Kann ich nur denken, zu prüfen, welche Checkboxen markiert sind, klicken Sie auf mit javascript, aber Frage mich, ob es eine einfachere Möglichkeit, die ich möglicherweise fehlen.

Habe ich auch gedacht, dass vielleicht eine versteckte radio-button für jede Gruppe funktionieren könnte.

Wenn jemand eine elegantere Lösung, die ich bin begierig, es zu hören.

Ich würd immer gehen, die Javascript-route für diese - auch mithilfe von radio-buttons, Sie würden noch brauchen, um Sie in JS vor dem senden, also ja, ein bisschen eigene Logik auf das Kontrollkästchen klicken Sie auf Ereignisse, die ist alles, was Sie brauchen!

InformationsquelleAutor magneticrob | 2011-05-19

  1. 3

    Seine war eine lange Zeit, seit ich getan habe, jedes Reine Javascript-Bibliotheken wie jQuery machen diese Art der Sache so einfach. Jedenfalls etwas, das wie folgt funktionieren könnte, würden Sie brauchen, um es zu testen in ein paar Browsern und optimieren Sie, was Sie brauchen.

    <form name="theForm"> 
    <input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male
    <input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female
    <br />
    <input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
    <input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
    <input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
    <input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>

<script>
    function clearGroup(elem) {
        var group = document.theForm.theGroup;
        for (var i=0; i<group.length; i++) {
            if (group[i] != elem) {
                group[i].checked = false;
            }
        }
    }
</script>

    Hier ist ein funktionierendes Beispiel zu spielen, um mit.

    Könnten Sie tun, dem entspricht, was in jQuery so einfach wie

    $('input:checkbox').click(function() {
    $(this).siblings(':checked').attr('checked', false);   
});

    haben und Sie keine browser-Kompatibilitätsprobleme zu befürchten.

    Vielen Dank für die Beantwortung. Das ist nicht ganz das, was ich wollte, aber - Die Checkboxen funktionieren sollte wie gewohnt in Ihren eigenen Gruppen. Also männliche und weibliche sollten beide in der Lage sein, um ausgewählt zu werden, sowie alle in der region-Gruppe. Vielen Dank für den Vorsprung aber. Übrigens, ich habe keine Abneigung zu jQuery und ich würde es lieber über eine Reine JS Antwort. Wahrscheinlich sollte es erwähnt haben in meiner ursprünglichen Frage
    Verwaltet, um es herauszufinden. Ich kann keine Antwort auf meine eigene Frage, aber hier sind die fiddle jsfiddle.net/aeeN4 vielen Dank für Eure Hilfe

    InformationsquelleAutor fearofawhackplanet

  2. 1

    Verwaltet, um es herauszufinden, mit ein wenig Hilfe von fearofawhack Planeten. Scheint wirklich einfach jetzt.

    Heres ein link zu JSFiddle http://jsfiddle.net/aeeN4/

    InformationsquelleAutor magneticrob

Schreibe einen Kommentar