kliknij lub zmień wydarzenie w radiu za pomocą jquery


86

Mam na stronie jakieś radia i chcę coś zrobić jak zmieni się sprawdzone radio, jednak kod nie działa w IE:

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

Po wygooglowaniu ludzie sugerują zamiast tego użycie kliknięcia . Ale to nie działa.

Oto przykładowy kod:

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

Nie działa również w IE.

Więc chcę wiedzieć, co się dzieje?

Obawiam się też, czy ponownie wyzwoli zdarzenie zmiany, jeśli kliknę zaznaczone radio?

AKTUALIZACJA:

Nie mogę dodać komentarza, więc odpowiadam tutaj.

Używam IE8 i link, który daje mi Furqan, również nie działa w IE8. Nie wiem dlaczego...


1
Której wersji IE używasz do testu? Twój kod działa dla mnie w IE8. Masz rację, że zdarzenie zostanie wywołane, jeśli klikniesz zaznaczone radio. Aby tego uniknąć, musisz sprawdzić swój kod.
kgiannakakis

to działa dla mnie, sprawdź następujące jsfiddle.net/NerXh
Furqan Hameedi

Odpowiedzi:


111

Ten kod zadziałał dla mnie:

$(function(){

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

});

http://jsfiddle.net/3q29L/


4
Nie działa to dla mnie, gdy celem jest jedno radio, a wybranie innego powoduje odznaczenie innego radia.
Doug Amos

1
Z wyjątkiem sytuacji, gdy wydajność jest problemem na stronie zawierającej wiele elementów. W takim przypadku użyj $('input[type=radio]')zamiast tego (patrz „uwagi dodatkowe”: api.jquery.com/radio-selector )
jemmons

72

Możesz określić atrybut nazwy, jak poniżej:

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

8
Mniej dwuznaczności. Dużo lepsza praktyka. +1
Jacks_Gulch

14

U mnie też działa, tutaj jest lepsze rozwiązanie:

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

Musisz upewnić się, że zainicjowałeś jqueryprzede wszystkim inne funkcje importu i javascript. Ponieważ $jest jqueryfunkcją. Parzysty

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

nie sprawdzi jqueryzainicjowanych lub nie. Zapewni to, że <code>będzie działać dopiero po zainicjowaniu wszystkich skryptów javascriptu.


7

Próbować

$(document).ready(

zamiast

$('document').ready(

lub możesz użyć formy skróconej

$(function(){
});

1

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

Ta składnia jest nieco bardziej elastyczna w obsłudze zdarzeń. Nie tylko można obserwować „zmiany”, ale także można tu kontrolować inne typy zdarzeń za pomocą jednego modułu obsługi zdarzeń. Możesz to zrobić, przekazując listę zdarzeń jako argumenty do pierwszego parametru. Zobacz jQuery On

Po drugie, .change () jest skrótem do .on ("zmiana", obsługa). Zobacz tutaj . Wolę używać .on () zamiast .change, ponieważ mam większą kontrolę nad zdarzeniami.

Na koniec po prostu pokazuję alternatywną składnię, aby dołączyć zdarzenie do elementu.


Jak to faktycznie różni od Iwao Nishida za odpowiedź ?
Wszyscy pracownicy są niezbędni

jest inny, ponieważ nie używa .change (), ale .on (). Nie ma powodu, aby tę odpowiedź negatywnie oceniać.
luis,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.