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

Posted 2023-02-24

【中文标题】如何找出用户在 Javascript 中选择了哪个单选按钮？

【英文标题】：How to find out which radio button the user selected in Javascript?

【发布时间】：2016-06-15 22:50:49

【问题描述】：

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

现在，我遇到的问题是用户可以选择多个单选按钮。他们应该只能选择 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"

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

【问题讨论】：

为什么不能使用普通的 html 和give your radio buttons the same name？

@Mdjon26 不清楚你的要求，更准确地澄清你的问题。

因为从您的帖子看来，您只想要一次只能选择一个收音机的功能，而不是您不需要 javascript。只需提到@SébastienVercammen。如果这不是您想要的，请详细说明。

【参考方案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" />

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

【讨论】：

JQuery 在控制台中工作，但在我的应用程序中不起作用。这是为什么？我是否需要以某种方式激活它？

确保在上述代码之前有 jQuery 源代码（或 CDN："ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js") 脚本标签。您还需要延迟执行直到 DOM 加载。即：$(document ).ready(function() //以上代码 );

【参考方案2】：

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

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

以防万一。

【参考方案3】：

您可以使用prop()

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

【讨论】：

不要将 Javascript 用于 HTML 的工作。

这个问题是专门针对 Javascript 提出的。