javascript - jquery 从 6 个表单中只选择一个收音机

Question

我有 6 个表格，每个表格有 2 个单选按钮。

我希望用户体验是，他们一次只能选择 1 个单选按钮。因此，当他们遍历另一个表单并检查单选按钮时。所有其他单选按钮将取消选择。

这是我迄今为止的尝试。

$(document).ready(function () {                 
  $('input[type=radio]').prop('checked', false);

  $('input[type=radio]').each(function (i) {                        
    $(this).not($('radio:checked')).prop('checked', false);                     
  });                   
});

我的想法是在开始时取消选择所有按钮。但在那之后我对我的逻辑感到困惑。

我想说

如果选中此收音机，请取消选中所有其他收音机。

虽然在英语中它适合一个句子，但我怎样才能将它放入 jquery 中？

Answer 1

$('input[type=radio]').on('change', function(){
    $('input[type=radio]').not(this).prop('checked', false);
});

小提琴

Answer 2

本质上你不能“取消点击”一个单选按钮 - 所以你所要做的就是在“点击”事件上，取消选择所有单选元素并选择被点击的那个。

$('input[type=radio]').on('click',function(e){
   $('input[type=radio]').prop('checked','');
   $(this).prop('checked','checked');
   e.preventDefault();
});

jsFiddle

Answer 3

试试这个（见演示：http: //jsfiddle.net/3xD7V/1/）：

$(document).ready(function () {
  $('input[type=radio]').prop('checked', false);
  $('input[type=radio]:first').prop('checked', true)

  $('input[type=radio]').click(function (event) {
    $('input[type=radio]').prop('checked', false);
    $(this).prop('checked', true);

    event.preventDefault();
  });
});