如何找出用户在Javascript中选择了哪个单选按钮？

Question

我有一个看起来像这样的表格

现在，我遇到的问题是用户可以选择多个单选按钮。 他们应该只能选择1。我有一个Javascript函数，它将遍历所有行并禁用此处未选择的按钮。

function disableNonSelectedRadioButtons(selectedRadioButton) {
    $('#payer-contract-global-table .clone-target').each(function (i)  {
        var radioName = 'radio' + '-c' + i;
        if (selectedRadioButton != radioName)
            $('#' + radioName).prop("checked", false);
    });
}

这可行。 但是我需要将正确的selectedRadioButton发送到此函数。 我如何在Javascript中正确执行此操作？

当前，HAML如下所示：

   %input.radio-button{:name => "radio-c#{index}", :type => "radio", :id => "radio-c#{index}", :checked => "true"}

我可以执行某种Java代码中的某种代码，说如果单击radio-c2按钮，它将发送给我的函数？

Answer 1

如果要使用jQuery：

  $('input[type="radio"]').click(function(e){
       var selectedRadioName = $(this).attr('name');
       disableNonSelectedRadioButtons(selectedRadioName);
  });

如果要动态创建元素，请使用事件委托： https : //learn.jquery.com/events/event-delegation/

 $(document).on('click', 'input[type="radio"]', function(e){
       var selectedRadioName = $(this).attr('name');
       disableNonSelectedRadioButtons(selectedRadioName);
 });

也就是说，您可以为此使用HTML：

<input type="radio" name="giveThemAllTheSameName" />

通过为单选按钮提供相同的名称，您将只能选择一个。

Answer 2

如果遇到未触发事件的情况，则会发生，因为DOM元素是动态生成的（我认为...），我这样解决：

$(document).on('click', 'input[type="radio"]', function(e){
   var selectedRadioName = $(this).attr('name');
   disableNonSelectedRadioButtons(selectedRadioName);
});

以防万一。

Answer 3

您可以使用prop（）

$('input[type="radio"]').click(disableNonSelectedRadioButtons($(this).prop('name')));