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

Question

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

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

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"}

Javascript 中是否有某种类型的代码我可以做到这一点如果我单击 radio-c2 的按钮，它会将其发送到我的函数吗？

Answer 1

您可以使用prop()

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

Answer 2

如果你想使用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" />

通过为单选按钮指定相同的名称，您将只能 select 个。

Answer 3

如果遇到事件没有被触发，那是因为DOM元素是动态生成的（我觉得。。。）我是这样解决的：

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

以防万一。

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

How to find out which radio button the user selected in Javascript?

javascript

jquery

html

haml