Mithilfe von jQuery zu Wählen Sie Verborgen, Radio-Buttons, aber onclick nicht Funktioniert
Bin ich mit Hilfe von jQuery zum ausblenden der tatsächlichen radio-buttons auf meiner website und ersetzen Sie Sie mit Bildern (custom radio-buttons). Die jQuery ermöglicht es dem Benutzer, klicken Sie auf das Bild, das wiederum "wählt" das versteckte radio-button. Das eigentliche radio-buttons onclick-Ereignisse mit Ihnen verbunden in den html-code, aber wenn ich auf "wählen" radio-button über dem Bild (jQuery), das eigentliche radio-button scheint nicht zu erkennen, die Auswahl und damit das onclick-Ereignis wird NICHT aktiviert.
Kann ich bestätigen, dass das onclick-event-script funktioniert bei Verwendung des Standard-radio-buttons (ohne jQuery); es funktioniert einfach nicht, wenn ich jQuery verwenden für custom radio-buttons. Hier ist mein code bisher:
HTML-Code
<div class="prettyRadiobuttons clearfix">
<ul id="store">
<li><input name="store" type="radio" id="store_1" value="store_1" onclick="dynamic_Select('code.php', this.value)" />
<label for="store_1">Store 1</label></li>
<li><input name="store" type="radio" id="store_2" value="store_2" onclick="dynamic_Select('code.php', this.value)" />
<label for="store_2">Store 2</label></li>
</ul>
</div>
jQuery (für benutzerdefinierte radio-buttons)
$(document).ready(function() {
//Adds the "radiolist" class to the div containing the radio buttons
$("div.prettyRadiobuttons").addClass("radiolist");
//Adds the html for the custom radio button (image) to each radio button (li)
$("div.radiolist li").append('<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>');
//Handles selecting a radio button
$(".radiolist .radio-select").click(
function(event) {
event.preventDefault();
var $boxes = $(this).parent().parent().children();
$boxes.removeClass("selected");
$(this).parent().addClass("selected");
$(this).parent().find(":radio").attr("checked","checked");
}
);
//Handles de-selecting a radio button
$(".radiolist .radio-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":radio").removeAttr("checked");
}
);
});
Den verschiedenen Klassen in der jQuery verwendet werden, weisen unterschiedliche Bilder per CSS basierend auf, ob oder nicht Sie den radio-button ausgewählt ist.
Den jQuery-code funktioniert ohne onclick-Ereignisse vorhanden sind, und die onclick-events arbeiten, ohne die Verwendung von jQuery, aber ich kann nicht mit Ihnen beiden zusammen zu arbeiten. Jede Hilfe wäre sehr geschätzt werden!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie einfach ein ".klicken Sie auf()" dort irgendwo.
Und
Hinweis ich mache es, bevor Sie das Attribut zu speichern, ändern Sie es zweimal in einer Zeile.
Es ist mir nicht ganz klar, was dein problem ist, aber ich habe ein paar Vorschläge:
Verwenden klicken Sie auf() statt attr("checked","checked") - der Effekt wird der gleiche sein (das radio ausgewählt werden), und der onclick-handler aufgerufen werden; oder:
Rufen Sie einfach die dynamic_Select direkt auf die jQuery-code.
Umschalten eine Klasse, die Muttergesellschaft von radio-Eingang. (label.radio) können sagen, Sie wollen Stil dieses Labels.radio-alternative mit einigen CSS3-styling, die auch die Arbeit im IE9/10. Sie wahrscheinlich auch wollen, um dies zu ermöglichen, auf dynamisch eingefügte Inhalte, dann sollten Sie sich binden, klicken Sie auf, um das Dokument. Sie wollen auch, um 'deaktivieren' das andere radio ' s Eltern in der radio-Gruppe.
Erste im docready-set Ausgangszustand:
Dann für die click-Ereignisse:
Html-Beispiel:
Habe ich ein vollständiges Beispiel auf der Geige.