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

【问题标题】：How to find out which radio button the user selected in Javascript?如何找出用户在 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。如果这不是您想要的，请详细说明。

标签： javascript jquery html haml

【解决方案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 提出的。