Ошибка Кнопка выбора радио с JQuery

Question

Я эту проблему, я получил эти радио кнопки

<input type="radio" name="bank" id="bank-1" data-movt="0"> Bank 1 <br /> 
<input type="radio" name="bank" id="bank-2" data-movt="0"> Bank 2 <br /> 

И когда я прижимаюсь кнопку «Сохранить» это, предполагают, чтобы получить имя id и значение data-movt , но вместо того, что всегда получает значение первой radio кнопки

<button type="button" id="save-bank" class="btn-save">Save</button> 

Когда я выбираю кнопка второго радио всегда отображает мое сообщение об ошибке, это мой JQuery код:

$('#save-bank').click(function() { 

    if ($('[name="bank"]').prop('checked') == true) { 

     var id = $('[name="bank"]').attr('id'); 
     var movt = $('[name="bank"]').data('movt'); 

     alert(id + ' - ' + movt); 

    } else { 

     alert('You need to select a bank'); 
    } 
}); 

Я делаю что-то неправильно? что-то не хватает? потому что он работает только с первым переключателем, я могу выбрать только один переключатель, но мне нужно получить значения выбранного радио, надеюсь, вы можете мне помочь, спасибо.

Answer 1

Попробуйте ... это должно обеспечить единый элемент, а не всех [name="bank"] элементов.

if ($('[name="bank"]:checked')) { 
     var id = $('[name="bank"]:checked').attr('id'); 
     var movt = $('[name="bank"]:checked').data('movt'); 
     alert(id + ' - ' + movt); 
    } else { 
     alert('You need to select a bank'); 
    } 

В то время как вы можете перебрать все элементы, это более простой способ, чтобы выбрать правильный «один» элемент без накладных расходов на JavaScript зацикливание.

Answer 2

Вам необходимо проверить каждый из переключателей, чтобы проверить, не проверено ли оно. После того, как вы проверите, что переключатель установлен, вы используете селектор как $('[name="bank"]'), чтобы получить attr, даст вам attr первого объекта, найденного с этим селектором.

$(function(){ 
 
    $('#save-bank').click(function() { 
 
     var count = 0; 
 
     $('[name="bank"]').each(function(){ 
 
     
 
     if ($(this).prop('checked') == true) { 
 
      
 
      var id = $(this).attr('id'); 
 
      var movt = $(this).data('movt'); 
 

 
      alert(id + ' - ' + movt); 
 

 
     } else{ 
 
      count++; 
 
     } 
 
     }) 
 
     if(count == 2) { 
 
     alert('Select a radio button'); 
 
     } 
 
     
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name="bank" id="bank-1" data-movt="0"> Bank 1 <br /> 
 
<input type="radio" name="bank" id="bank-2" data-movt="0"> Bank 2 <br /> 
 
<button type="button" id="save-bank" class="btn-save">Save</button>