使用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的值，但不是总是得到第一个{{1}的值按钮

radio

当我选择第二个单选按钮时，总是显示我的错误消息，这是我的jQuery代码：

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

我做错了吗？遗漏了什么？因为它只适用于第一个单选按钮，我只能选择一个单选按钮，但我需要获取所选收音机的值，希望你能帮助我，谢谢。

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>