Klicken Sie auf das Optionsfeld Javascript JQuery

89

Ich habe 2 Optionsfelder und jquery läuft.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

Jetzt kann ich mit einer Schaltfläche onClick einstellen, um eine Funktion auszuführen. Wie können Optionsfelder eine Funktion ausführen, wenn ich auf eines davon klicke?

javascript jquery David 19801
quelle

4

Hinweis. Es ist am besten, wenn Formularelemente nicht auf Klicks reagieren, da viele Benutzer über die Tastatur in Formularen navigieren.

Superluminary

166

Sie können .changefür das verwenden, was Sie wollen

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

ab jQuery 1.3

Sie brauchen das '@' nicht mehr. Die richtige Auswahl ist:

$("input[name='lom']")

Peter Kelly
quelle

7

Beachten Sie, dass Sie ab jQuery 1.3 das '@' nicht mehr benötigen. Die richtige Art der Auswahl ist:$("input[name='lom']")

Lubar

4

Ist es möglich, diese Lösung in die unten stehende Lösung von @JohnIdol mit bedingten Anweisungen zu integrieren, die auf Funkwerten basieren? ex

$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;

LazerSharks

Wie von jQuery 1.3, Sie sollten nicht verwenden ‚@‘ mit dem Namen Eigenschaft. Wenn Sie dies tun, erhalten Sie eine jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionFehlermeldung. Es ist also keine Frage der Wahl.

Scaryguy

53

Wenn Sie Ihre Radios in einem Container mit der ID = radioButtonContainerId haben, können Sie weiterhin onClick verwenden und dann überprüfen, welches ausgewählt ist, und dementsprechend einige Funktionen ausführen:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

JohnIdol
quelle

Danke dir. Dies funktionierte für mich, da mein Feld Teil eines Arrays war und ich die Eingabeschreibweise [name = 'xxx'] nicht verwenden konnte - <input type = "radio" name = "Need [Measure_type]" id = "Need_measure_type" value = "aaa">

Crafter

Reagiert dies auch dann, wenn Sie die Markierung mit den Pfeiltasten nach unten bewegen?

Alisso

Dies funktioniert nicht in Mobile # Selector funktioniert nicht in Mobile.

Zawhtut

19

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

Bishoy Hanna
quelle

1

Obwohl diese Antwort nicht zeigt, wie der Code mit dem Ereignis verbunden wird, gefällt es mir, dass sie die Informationen zum Abrufen des Werts der Optionsfeldgruppe enthält.

Manfred

1

$ ("input [@ name = 'lom']"). change (function () {// Mach hier etwas Interessantes});

Bishoy Hanna

11

Das sollte gut sein

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

Adam Lukaszczyk
quelle

Sie haben a) verpasst; hinten.

Biswas Khayargoli

8

Es gibt verschiedene Möglichkeiten, dies zu tun. Unabhängig davon wird dringend empfohlen, einen Container um die Optionsfelder zu haben. Sie können jedoch auch eine Klasse direkt auf die Schaltflächen setzen. Mit diesem HTML:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

Sie können nach Klasse auswählen:

$(".shapeButton").click(SetShape);

oder wählen Sie nach Container-ID:

$("#shapeList").click(SetShape);

In beiden Fällen wird das Ereignis ausgelöst, wenn Sie entweder auf das Optionsfeld oder auf die Beschriftung klicken. In letzterem Fall (Auswahl durch "#shapeList") wird durch Klicken auf die Beschriftung die Klickfunktion aus irgendeinem Grund zweimal ausgelöst am wenigsten in FireFox; Die Auswahl nach Klassen reicht nicht aus.

SetShape ist eine Funktion und sieht folgendermaßen aus:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

Auf diese Weise können Sie Beschriftungen auf Ihren Schaltflächen und mehrere Optionsfeldlisten auf derselben Seite haben, die unterschiedliche Aufgaben ausführen. Sie können sogar jede einzelne Schaltfläche in derselben Liste unterschiedliche Aufgaben ausführen lassen, indem Sie in SetShape () basierend auf dem Wert der Schaltfläche ein anderes Verhalten festlegen.

ZeroK
quelle

3

Es ist immer gut, die DOM-Suche einzuschränken. Verwenden Sie daher auch besser ein übergeordnetes Element, damit nicht das gesamte DOM durchlaufen wird.

ES IST SEHR SCHNELL

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

Vins
quelle

Klicken Sie auf das Optionsfeld Javascript JQuery

Antworten: