Ersetzen Sie radio-buttons mit Bilder mit JQuery

Ich haben eine Gruppe von radio-buttons, die ich ersetzen wollen mit Bilder wenn diese Option aktiviert und deaktiviert werden.

<div id="answerOptions">
<input type="radio" name="answeroption" id="r1" value="radio1" checked=''checked'/>radio1<br/>
<input type="radio" name="answeroption" id="r2" value="radio2"/>radio2<br/>
</div>

Habe ich zwei Bilder 1. button_on.JPG für die aktiviert radio-button und 2. button_off.JPG für nicht aktiviert radio-button.
Ich möchte erreichen, folgende Aufgaben
1. Ich will zu ersetzen, die radio-buttons mit diesen Bildern.
2. Beim laden der Seite aktiviert radio-button sollte richtige Bild.

Hinweis: Radio-buttons dynamisch erzeugt werden und deren ids sowie Wert ändern möchten, müssen Sie für jede Anforderung.

Ich brauche Hilfe mit Jquery. Appritiate Ihre Eingaben.

Mögliche Duplikate, sowie viele hilfreiche Ergebnisse via Google.
Alex und Yi Jiang - ich habe schon gesehen, diese Lösung, aber in der Bild-tick solution-mapping der Bilder fertig sind mit den Werten der radio-buttons, die nicht helfen, mich. Eigentlich Frage wurde formatiert, so dass es aussieht duplizieren, mein Fehler. Ich habe aktualisiert die Frage und fügte hinzu, ein Hinweis.
Daher meine möglich "duplizieren". Froh zu sehen, Sie haben bereits recherchiert; manchmal ist es gut zu verknüpfen, um einige Sachen, die Sie schon gelesen haben, uns wissen zu lassen, was nicht Ihr problem lösen.

InformationsquelleAutor Sunil Chavan | 2011-09-28

  1. 4

    Das Rad nicht neu erfinden, einen schönen Bibliothek:

    http://uniformjs.com/

    InformationsquelleAutor Juan Ignacio

  2. 2

    Den folgenden code, der zwei Dinge tut: 1. ersetzt die radio-buttons auf laden. 2. Sie ändert, wenn die Bilder angeklickt werden. Ich werde nicht garuntee, dass es ist perfekt für Ihre situation, aber es sollte genug sein, zum du zu erhalten begannen.

    //on load
$(function() {
    //replace the checkboxes with the images
    $("input name='answeroption']").each(function() {
        if ($(this).attr('checked')) { //radio button is checked onload
            $(this).hide();
            $(this).after($("<img src='button_on.jpg' class='radioButtonImage' />"));
        } else { //radio button is not checked
            $(this).hide();
            $(this).after($("<img src='button_off.jpg'  class='radioButtonImage' />"));
        }
    });

    //setup click events to change the images
    $("input.radioButtonImage").click(function() {
        if($(this).attr('src') == 'button_on.jpg') { //its checked, so uncheck it
            $(this).attr('src', 'button_off.jpg');
            $(this).prev().attr('checked', 'false');
        } else { //its not checked, so check it
            $(this).attr('src', 'button_on.jpg');
            $(this).prev().attr('checked', 'true');
        }
    });
});

    InformationsquelleAutor jtfairbank

Schreibe einen Kommentar