fare clic o modificare l'evento sulla radio utilizzando jquery

86

Ho alcune radio nella mia pagina e voglio fare qualcosa quando la radio selezionata cambia, tuttavia il codice non funziona in IE:

$('input:radio').change(...);

E dopo aver cercato su Google, le persone suggeriscono di utilizzare invece il clic . Ma non funziona.

Questo è il codice di esempio:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('document').ready(
                function(){
                    $('input:radio').click(
                        function(){
                            alert('changed');   
                        }
                    );  
                }
            );

        </script>
    </head>
    <body>
        <input type="radio" name="testGroup" id="test1" />test1<br/>
        <input type="radio" name="testGroup" id="test2" />test2<br/>
        <input type="radio" name="testGroup" id="test3" />test3</br>
    </body>
</html>

Inoltre non funziona in IE.

Quindi voglio sapere cosa sta succedendo?

Inoltre ho paura se riattiverà l'evento di modifica se clicco su una radio selezionata?

AGGIORNARE:

Non posso aggiungere commenti, quindi rispondo qui.

Uso IE8 e il collegamento che mi ha fornito Furqan non funziona nemmeno in IE8. Non so perché...

jquery radio-button

— hguser
fonte

1

Quale versione di IE stai usando per il test? Il tuo codice funziona per me in IE8. Hai ragione che l'evento si attiverà se fai clic su una radio selezionata. È necessario eseguire un controllo nel codice per evitarlo.

— kgiannakakis

per me funziona, controlla il seguente jsfiddle.net/NerXh

— Furqan Hameedi

111

Questo codice ha funzionato per me:

$(function(){

    $('input:radio').change(function(){
        alert('changed');   
    });          

});

http://jsfiddle.net/3q29L/

— alexl
fonte

4

Questo non funziona per me quando una singola radio è mirata e la selezione di un'altra radio fa deselezionare l'altra.

— Doug Amos

1

Tranne quando le prestazioni sono un problema su una pagina con molti elementi. In tal caso, utilizzare $('input[type=radio]')invece (vedere "note aggiuntive": api.jquery.com/radio-selector )

— jemmons

72

È possibile specificare l'attributo name come di seguito:

$( 'input[name="testGroup"]:radio' ).change(

— Iwao Nishida
fonte

8

Meno ambiguità. Pratica molto migliore. +1

— Jacks_Gulch

14

Funziona anche per me, ecco una soluzione migliore:

violino demo

<form id="myForm">
  <input type="radio" name="radioName" value="1" />one<br />
  <input type="radio" name="radioName" value="2" />two 
</form>

<script>
$('#myForm input[type=radio]').change(function() {       
    alert(this.value);
});
</script>

Devi assicurarti di aver inizializzato jquerysopra tutte le altre importazioni e funzioni javascript. Perché $è una jqueryfunzione. Anche

$(function(){
 <code>
});

non controllerà jqueryinizializzato o meno. Garantirà che <code>verrà eseguito solo dopo che tutti i javascript sono stati inizializzati.

— suhailvs
fonte

7

Provare

$(document).ready(

invece di

$('document').ready(

oppure puoi usare una forma abbreviata

$(function(){
});

— rahul
fonte

1

$( 'input[name="testGroup"]:radio' ).on('change', function(e) {
     console.log(e.type);
     return false;
});

Espandi lo snippet

Questa sintassi è un po 'più flessibile per gestire gli eventi. Non solo puoi osservare i "cambiamenti", ma anche altri tipi di eventi possono essere controllati qui utilizzando un unico gestore di eventi. Puoi farlo passando l'elenco di eventi come argomenti al primo parametro. Vedi jQuery On

In secondo luogo, .change () è una scorciatoia per .on ("change", gestore). Vedi qui . Preferisco usare .on () piuttosto che .change perché ho un maggiore controllo sugli eventi.

Infine, sto semplicemente mostrando una sintassi alternativa per allegare l'evento all'elemento.

— Carlos Augusto
fonte

In che modo questo è effettivamente diverso dalla risposta di Iwao Nishida ?

— Tutti i lavoratori sono essenziali

è diverso perché non usa .change () ma .on () Non c'è motivo per downvote questa risposta.

— luis