Jquery-UI-radio-Taste
Ich bin mit zwei Gruppen von radio-buttons
Gruppe 1:
- Zustand
- Stadt
Gruppe 2:
- A-C
- D-H
- I-M
- N-R
- S-Z
Wenn ich Umschalten zwischen Staat und Stadt, ich will Ein-C aus Gruppe 2 festgelegt werden, kontrolliert, während die andere eingestellt sind deaktiviert.
Habe ich es in diese Geige hier fiddle
HTML:
<div id="sort-radio">
<input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
<input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
<label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
<label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
<label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
<label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
<label for="S-Z">S-Z</label>
</div>
JavaScript:
$(function () {
$("#sort-radio").buttonset();
});
$(function () {
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
document.getElementById("byState").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
document.getElementById("byCity").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
Jedoch, wenn ich mit genau diesem code in meine website, funktioniert es nicht (es lässt die zuvor ausgewählte Schaltfläche aus der Gruppe 2 ausgewählt ist). Ich bin mit den jquery-ui-1.10.1.custom.css, die displays der radio-buttons schön, wie hier gefunden: jquery ui button.
Keine Ahnung, warum das beeinflussen? Wenn ich die Zeile entfernen <link href="jquery-ui-1.10.1.custom.css" />
aus meiner index.php, funktioniert es wunderbar.
- Können Sie reproduzieren Sie das problem überhaupt in ein fiddle?
- Ich bin neu zu hantieren...ich habe versucht, das hinzufügen einer externen jquery .css-Datei aber nicht sicher, wie man es an die Arbeit.
- Ich habe das CSS an der fiddle und nicht ein problem zu sehen: jsfiddle.net/FRFdk/170
- Sorry, ich hatte versehentlich eingeschlossen die falsche Geige. Der link ist nun aktualisiert. Die Geige, die Sie gesendet, nicht die Anzeige der radio-buttons geändert durch das jquery ui css
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einige Probleme:
Den
button
widget funktioniert durch die Reaktion auf click-events auf den radio-button-label. Dies bedeutet, dass dieclick
Fall, Sie hören auf die radio-buttons, die sich selbst nicht gefeuert, da Sie eigentlich gar nicht anklicken der radio-buttons selbst, sondern Ihrelabel
s. Sie können umgehen dies, indem Sie diechange
Veranstaltung.Müssen Sie rufen Sie
.buttonset('refresh')
nach der manuellen Aktualisierung der Aktivierungszustand eines radio-button.Nur die Einstellung der
checked
- Attribut auf einen radio-button einer Gruppe ist genug, um die restlichen werden automatisch deaktiviert. Sie sollten nicht brauchen, um diechecked
Eigenschaft in jedem einzelnen.Dann sollten Sie Ihre event-Handler innerhalb der
document.ready
handler als gut. Sie können auch nur eine, statt zwei.Mit all diesen Dingen im Kopf, hier sind die änderungen, die ich machen würde:
Beispiel: http://jsfiddle.net/Fzq8L/2/
Da du mit jQuery, können Sie zur Vereinfachung dieses ein tolles Angebot von eine Klasse hinzufügen der radio buttons - von denen nur einer sein kann, "set" SO hören Sie das change-Ereignis auf die. Entfernen Sie die zusätzliche Funktion beim start, wählen Sie eine der "array" von Schaltflächen zu klicken, die von der zweiten Gruppe. (da kann nur einer ausgewählt werden)
Einfachere version markup :
Code:
Beispiel:http://jsfiddle.net/MarkSchultheiss/8x28x/2/
Zurück, die zweite Gruppe, erste Element, wenn entweder der ersten Gruppe geändert wird:
Turnschuh für, die: http://jsfiddle.net/MarkSchultheiss/8x28x/3/