javascript jquery pulsante di opzione clic

89

Ho 2 pulsanti di opzione e jquery in esecuzione.

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

Ora, con un pulsante posso impostare suClic per eseguire una funzione. Qual è il modo per fare in modo che i pulsanti di opzione eseguano una funzione quando clicco su uno di essi?

javascript jquery

— David19801
fonte

4

Nota. È meglio non fare in modo che gli elementi del modulo rispondano al clic, poiché molte persone navigano nei moduli utilizzando la tastiera.

— superluminario

166

Puoi usare .changeper quello che vuoi

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

a partire da jQuery 1.3

non hai più bisogno del "@". Il modo corretto per selezionare è:

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

— Peter Kelly
fonte

7

Notare che, a partire da jQuery 1.3, non è più necessario il simbolo "@". Il modo corretto per selezionare è:$("input[name='lom']")

— lubar

4

È possibile integrare questa soluzione con la soluzione di @JohnIdol di seguito con istruzioni condizionali basate su valori radio? ex

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

— LazerSharks

A partire da jQuery 1.3, non dovresti usare '@' con la proprietà name. Se lo fai, riceverai un jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionerrore. Quindi non è una questione di scelta.

— scaryguy

53

Se hai le tue radio in un contenitore con id = radioButtonContainerId puoi ancora usare onClick e poi controllare quale è selezionata e di conseguenza eseguire alcune funzioni:

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

— JohnIdol
fonte

Grazie. Questo ha funzionato per me, perché il mio campo faceva parte di un array e non potevo usare la notazione di input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">

— crafter il

Questo reagisce anche se scorri verso il basso e sposti l'indicatore con i tasti freccia?

— Alisso

questo non funziona su dispositivi mobili # selector non funziona su dispositivi mobili.

— 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
fonte

1

Sebbene questa risposta non mostri come collegare il codice all'evento, mi piace che contenga le informazioni su come recuperare il valore del gruppo di pulsanti di opzione.

— Manfred

1

$ ("input [@ name = 'lom']"). change (function () {// Fai qualcosa di interessante qui});

— Bishoy Hanna

11

questo dovrebbe essere buono

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

— Adam Lukaszczyk
fonte

Ti sei perso una); dietro.

— Biswas Khayargoli

8

Ci sono diversi modi per farlo. Avere un contenitore attorno ai pulsanti di opzione è altamente raccomandato a prescindere, ma puoi anche inserire una classe direttamente sui pulsanti. Con questo 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>

puoi selezionare per classe:

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

oppure seleziona per ID contenitore:

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

In entrambi i casi, l'evento si attiverà facendo clic sul pulsante di opzione o sull'etichetta, anche se stranamente in quest'ultimo caso (selezionando "#shapeList"), facendo clic sull'etichetta si attiverà la funzione clic due volte per qualche motivo, a almeno in FireFox; la selezione per classe non lo farà.

SetShape è una funzione e ha questo aspetto:

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

In questo modo, puoi avere etichette sui pulsanti e più elenchi di pulsanti di opzione sulla stessa pagina che fanno cose diverse. È anche possibile fare in modo che ogni singolo pulsante nello stesso elenco esegua operazioni diverse impostando un comportamento diverso in SetShape () in base al valore del pulsante.

— ZeroK
fonte

3

è sempre bene limitare la ricerca DOM. quindi è meglio usare anche un genitore, in modo che l'intero DOM non venga attraversato.

È MOLTO VELOCE

<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
fonte