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
InformationsquelleAutor user2107906 | 2013-03-12
Schreibe einen Kommentar