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

​