43
Wie rufe ich onclick auf eine Radiobutton-Liste mit Javascript?Aufruf onclick auf eine Radiobutton-Liste mit Javascript
A
Antwort
33
Wie generieren Sie die Optionsfeldliste? Wenn Sie nur mit Hilfe von HTML:
<input type="radio" onclick="alert('hello');"/>
Wenn Sie diese über so etwas wie ASP.NET sind zu erzeugen, können Sie das als ein Attribut für jedes Element in der Liste hinzufügen. Sie können dies ausführen, nachdem Sie Ihre Liste füllen, oder es inline, wenn Sie Ihre Liste one-by-one aufbauen:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
Weitere Informationen: http://www.w3schools.com/jsref/event_onclick.asp
15
ich mit @annakata einig, dass diese Frage einige braucht mehr Klarheit, aber hier ist ein sehr, sehr einfaches Beispiel dafür, wie die Einrichtung einer onclick Event-Handler für die Radio-Buttons:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
</script>
</head>
<body>
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
</body>
</html>
7
das Problem hierbei ist, dass die Wiedergabe eines Radiobuttonlist hüllt die einzelnen Radiobuttons (Listitems) in span tags und e Wenn Sie dem Listenelement eine clientseitige Ereignisbehandlungsroutine direkt zuweisen, weist es das Attribut mithilfe der Attribute dem Bereich zu. Das Zuweisen des Ereignisses zur RadioButtonList weist es der Tabelle zu, in der es rendert.
Der Trick hier ist, die ListItems auf der Aspx-Seite und nicht aus dem Code dahinter hinzuzufügen. Sie können dann der onClick-Eigenschaft die JavaScript-Funktion zuweisen. Dieser Blogpost; attaching client-side event handler to radio button list by Juri Strumpflohner erklärt alles.
Dies funktioniert nur, wenn Sie die ListItems im Voraus kennen und nicht hilft, wo die Elemente in der RadioButtonList dynamisch mit dem Code hinter hinzugefügt werden müssen.
+1
Um die Dinge noch schlimmer zu machen, kommt das onClick auch nicht in Intellisense auf. Danke, das hat geholfen. – Narayana
21
Um das OnClick-Ereignis auf einer Radio-Taste rufen Sie das click() Methode auf dem DOM-Element auslösen:
document.getElementById("radioButton").click()
jquery mit:
$("#radioButton").click()
AngularJS:
angular.element('#radioButton').trigger('click')
+1
Es gibt jedoch eine Sache mit der .click(): Wenn Sie den ausgewählten Wert eines Radios mit Javascript wie folgt ändern, das 'ändern' Ereignis wird nicht in IE ausgelöst (ich versuchte IE8) – Michiel
+0
@Michiel vielen Dank, Dieser Kommentar löste ein sehr schwieriges Problem für mich! Posted eine Frage/Antwort darüber - http://Stackoverflow.com/a/13827249/66372 PS. Verhalten ist auch in Chrom vorhanden – eglasius
0
try folgende Lösung
HTML:
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
JS:
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
Haben Sie foreach (ListItem RadioButton- in RadioButtons.Items) nicht bedeuten? – Fandango68