щелкните или измените событие на радио с помощью jquery


86

У меня есть несколько радиоприемников на моей странице, и я хочу что-то сделать при изменении отмеченного радиомодуля, однако код не работает в IE:

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

А после поиска в Google люди предлагают вместо этого использовать щелчок . Но это не работает.

Это пример кода:

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

В IE тоже не работает.

Итак, я хочу знать, что происходит?

Также я боюсь, что если я нажму на отмеченное радио, событие изменения будет перезапущено?

ОБНОВИТЬ:

Я не могу добавить комментарий, поэтому отвечаю здесь.

Я использую IE8, и ссылка, которую дал мне Furqan, также не работает в IE8. Я не знаю почему...


1
Какую версию IE вы используете для теста? Ваш код работает у меня в IE8. Вы правы в том, что событие сработает, если вы нажмете отмеченный переключатель. Чтобы этого избежать, необходимо выполнить проверку кода.
kgiannakakis 02

у меня это работает, проверьте следующий jsfiddle.net/NerXh
Furqan Hameedi

Ответы:


111

Этот код работал у меня:

$(function(){

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

});

http://jsfiddle.net/3q29L/


4
Это не работает для меня, когда нацелено одно радио, и выбор другого радио приводит к отмене выбора другого.
Дуг Амос

1
За исключением случаев, когда производительность является проблемой на странице с большим количеством элементов. В этом случае используйте $('input[type=radio]')вместо этого (см. «Дополнительные примечания»: api.jquery.com/radio-selector )
jemmons

72

Вы можете указать атрибут имени, как показано ниже:

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

8
Меньше двусмысленности. Намного лучшая практика. +1
Jacks_Gulch 08

14

У меня тоже работает, вот лучшее решение:

скрипка демо

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

Вы должны убедиться, что инициализированы jqueryвыше всех остальных функций импорта и javascript. Потому $что это jqueryфункция. Четный

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

не будет проверять jqueryинициализацию или нет. Это обеспечит <code>запуск только после инициализации всех javascripts.


7

Пытаться

$(document).ready(

вместо того

$('document').ready(

или вы можете использовать сокращенную форму

$(function(){
});

1

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

Этот синтаксис немного более гибкий для обработки событий. Вы можете не только наблюдать «изменения», но и управлять другими типами событий, используя один единственный обработчик событий. Вы можете сделать это, передав список событий в качестве аргументов первому параметру. См. JQuery On

Во-вторых, .change () - это ярлык для .on ("изменение", обработчик). Смотрите здесь . Я предпочитаю использовать .on (), а не .change, потому что у меня больше контроля над событиями.

Наконец, я просто показываю альтернативный синтаксис для присоединения события к элементу.


Чем это эффективно отличается от ответа Ивао Нисиды ?
All Workers Are Essential

он отличается, потому что он не использует .change (), а .on (). Нет причин для отрицательного голосования за этот ответ.
Луис
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.