clique ou mude o evento no rádio usando jquery

Question 1

Tenho alguns rádios em minha página e quero fazer algo quando o rádio marcado mudar, porém o código não funciona no IE:

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

E depois de pesquisar no Google, as pessoas sugerem usar o clique . Mas não funciona.

Este é o código de exemplo:

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

Também não funciona no IE.

Então, eu quero saber o que está acontecendo?

Também tenho medo se ele irá reativar o evento de mudança se eu clicar em um rádio selecionado.

ATUALIZAR:

Não posso adicionar comentários, então respondo aqui.

Eu uso o IE8 e o link que Furqan me dá também não funciona no IE8. Eu não sei porque...

Question 2

Este código funcionou para mim:

$(function(){

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

});

http://jsfiddle.net/3q29L/

Question 3

Você pode especificar o atributo de nome conforme abaixo:

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

Question 4

Funciona para mim também, aqui está uma solução melhor ::

demonstração de violino

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

Você deve certificar-se de que inicializou jqueryacima de todas as outras importações e funções javascript. Porque $é uma jqueryfunção. Até

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

não irá verificar jqueryinicializado ou não. Isso garantirá que <code>será executado somente depois que todos os javascripts forem inicializados.

Question 5

Experimentar

$(document).ready(

ao invés de

$('document').ready(

ou você pode usar uma forma abreviada

$(function(){
});

Question 6

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

Expandir trecho

Essa sintaxe é um pouco mais flexível para lidar com eventos. Você pode não apenas observar "mudanças", mas também outros tipos de eventos podem ser controlados aqui, usando um único manipulador de eventos. Você pode fazer isso passando a lista de eventos como argumentos para o primeiro parâmetro. Veja jQuery On

Em segundo lugar, .change () é um atalho para .on ("alterar", manipulador). Veja aqui . Prefiro usar .on () em vez de .change porque tenho mais controle sobre os eventos.

Por último, estou simplesmente mostrando uma sintaxe alternativa para anexar o evento ao elemento.

Answer 1

Tenho alguns rádios em minha página e quero fazer algo quando o rádio marcado mudar, porém o código não funciona no IE:

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

E depois de pesquisar no Google, as pessoas sugerem usar o clique . Mas não funciona.

Este é o código de exemplo:

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

Também não funciona no IE.

Então, eu quero saber o que está acontecendo?

Também tenho medo se ele irá reativar o evento de mudança se eu clicar em um rádio selecionado.

ATUALIZAR:

Não posso adicionar comentários, então respondo aqui.

Eu uso o IE8 e o link que Furqan me dá também não funciona no IE8. Eu não sei porque...

Answer 2

1

Qual versão do IE você está usando para o teste? Seu código funciona para mim no IE8. Você está certo de que o evento será disparado se você clicar em um rádio selecionado. Você precisa realizar uma verificação em seu código para evitar isso.

kgiannakakis

Answer 3

funciona para mim, verifique o seguinte jsfiddle.net/NerXh

Furqan Hameedi

Answer 4

111

Este código funcionou para mim:

$(function(){

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

});

http://jsfiddle.net/3q29L/

alexl
fonte

4

Isso não funciona para mim quando um único rádio é direcionado e a seleção de outro faz com que o outro seja desmarcado.

Doug Amos

1

Exceto quando o desempenho é um problema em uma página com muitos elementos. Nesse caso, use $('input[type=radio]')(consulte "notas adicionais": api.jquery.com/radio-selector )

jemmons

Answer 5

4

Isso não funciona para mim quando um único rádio é direcionado e a seleção de outro faz com que o outro seja desmarcado.

Doug Amos

Answer 6

1

Exceto quando o desempenho é um problema em uma página com muitos elementos. Nesse caso, use $('input[type=radio]')(consulte "notas adicionais": api.jquery.com/radio-selector )

jemmons

Answer 7

72

Você pode especificar o atributo de nome conforme abaixo:

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

Iwao Nishida
fonte

8

Menos ambigüidade. Prática muito melhor. +1

Jacks_Gulch

Answer 8

8

Menos ambigüidade. Prática muito melhor. +1

Jacks_Gulch

Answer 9

Funciona para mim também, aqui está uma solução melhor ::

demonstração de violino

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

Você deve certificar-se de que inicializou jqueryacima de todas as outras importações e funções javascript. Porque $é uma jqueryfunção. Até

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

não irá verificar jqueryinicializado ou não. Isso garantirá que <code>será executado somente depois que todos os javascripts forem inicializados.

Answer 10

7

Experimentar

$(document).ready(

ao invés de

$('document').ready(

ou você pode usar uma forma abreviada

$(function(){
});

Rahul
fonte

Answer 11

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

Expandir trecho

Essa sintaxe é um pouco mais flexível para lidar com eventos. Você pode não apenas observar "mudanças", mas também outros tipos de eventos podem ser controlados aqui, usando um único manipulador de eventos. Você pode fazer isso passando a lista de eventos como argumentos para o primeiro parâmetro. Veja jQuery On

Em segundo lugar, .change () é um atalho para .on ("alterar", manipulador). Veja aqui . Prefiro usar .on () em vez de .change porque tenho mais controle sobre os eventos.

Por último, estou simplesmente mostrando uma sintaxe alternativa para anexar o evento ao elemento.

Answer 12

Como isso é efetivamente diferente da resposta de Iwao Nishida ?

Todos os trabalhadores são essenciais de

Answer 13

é diferente porque não usa .change (), mas .on (). Não há razão para downvote esta resposta.

luis

clique ou mude o evento no rádio usando jquery

Respostas:

demonstração de violino