получить значение переключателя при изменении не работает

Question

Я использую этот код для получения значения переключателя в jquery, моя проблема в том, что когда я нажимаю параметр 1, он работает нормально, но когда я нажимаю на вариант 2, он не работает. Пожалуйста помоги!

<form> 
Option 1<input type="radio" name="opt" id="radio" value="Option 1"> 
Option 2<input type="radio" name="opt" id="radio" value="Option 2"> 
</form> 

$('#radio').change(function(){ 
var value = $('input[name=opt]:checked').val(); 
alert(value); 
}); 

JSFiddle: http://jsfiddle.net/khizar067/h6ye7/

Answer 1

ID элементов must be unique, если есть несколько элементов с одинаковым идентификатором, то селектор ID будет возвращать только первый элемент. так что в вашем случае обработчик изменений событие добавляется только к первому элементу радио

<form> 
Option 1<input type="radio" name="opt" class="radio" value="Option 1"> 
Option 2<input type="radio" name="opt" class="radio" value="Option 2"> 
</form> 

и

//or $('.radio') as the selector 
var $radios = $('input[name=opt]').change(function() { 
    var value = $radios.filter(':checked').val(); 
    alert(value); 
}); 

Демо: Fiddle

Answer 2

id должен быть уникальным, попробуйте использовать класс вместо:

Html:

<form> 
    Option 1<input type="radio" name="opt" class="radio" value="Option 1"> 
    Option 2<input type="radio" name="opt" class="radio" value="Option 2"> 
</form> 

Js:

$('.radio').change(function(){ 
    var value = $(this).val(); 
    alert(value); 
}); 

Демонстрационных Fiddle

Answer 3

Пожалуйста, попробуйте с демонстрационным.

$('input[name=opt]').change(function(){ 
var value = $('input[name=opt]:checked').val(); 
alert(value); 
}); 

http://jsfiddle.net/h6ye7/2/

Answer 4

Попробуйте, это поможет вам, если вы используете использовать кнопку несколько радио, то вам не нужно, чтобы получить идентификатор или класс элемента, который вы просто получить элемент свойство, есть имя тега ..

есть несколько примеров на этот

1.By имя тега (Все кнопки радио могут быть выбраны)

$('input[type=radio]').change(function(){ 
     var value = $('input[name=opt]:checked').val(); 
     alert(value); 
    }); 

2.By имя класса (Multiple радио-кнопка может быть выбор)

$('.radiobutton').change(function(){ 
     var value = $('input[name=opt]:checked').val(); 
     alert(value); 
    }); 

3.By идентификатор (кнопка один радио выбрать только)

$('#radiobutton').change(function(){ 
    var value = $('input[name=opt]:checked').val(); 
    alert(value); 
}); 

Fiddle Here

Answer 5

<form id="abcd"> 
    Option 1<input type="radio" name="opt" id="radio" value="Option 1"> 
    Option 2<input type="radio" name="opt" id="radio" value="Option 2"> 
</form> 

$('#abcd').on('change','input[name=opt]:checked',function(){ 
    var value = $(this).val(); 
    alert(value); 
}); 

1. id = "abcd" - это селектор уникальности во всем HTML-коде, если у вас несколько форм, это поможет получить конкретную форму.
2. в JQuery для на прочитайте следующую документацию Посетите http://api.jquery.com/on/ «изменение» является событием, если это событие произошло в любое время на странице для селектора «ABCD» JQuery будет искать «ввод [имя = неавтоматическое]: проверено» я ,e input type, имя которого выбрано и будет проверяться, если он проверен, а функция() является обработчиком, который будет обрабатывать событие, то вы можете написать свою логику здесь ...