如何获取按时间顺序最新选中的分组单选按钮？

你遇到的问题本质是：jQuery的:checked选择器是按照DOM节点的顺序返回选中元素的，所以默认会拿到第一个被选中的a1，但你需要的是用户通过交互最新选中的那个单选按钮。解决这个问题的核心思路是通过监听单选按钮的change事件，实时记录用户刚选中的元素。

下面是具体的实现方案：

方案一：用变量维护最新选中的元素 #

这个方法简单直接，通过一个变量来存储用户最新选中的单选按钮：

// 页面加载完成后初始化
$(document).ready(function() {
  // 初始化：默认选中的最后一个a行单选按钮（如果需要的话）
  let latestChecked = $('input[type="radio"]:checked').last();

  // 监听所有单选按钮的change事件
  $('input[type="radio"]').on('change', function() {
    // 用户选中新的单选按钮时，更新变量
    latestChecked = $(this);
    // 这里可以即时查看结果
    console.log('最新选中的ID:', latestChecked.attr('id'));
  });

  // 在你需要获取最新选中的地方（比如你的fontPicker逻辑里）
  $('#fontPicker i').on('click', function() {
    if (latestChecked) {
      // 拿到最新选中的单选按钮ID
      const latestId = latestChecked.attr('id');
      console.log('当前最新选中的是:', latestId);
      // 执行你的后续逻辑
    }
  });
});

方案二：用全局数据存储（避免全局变量污染） #

如果不想用全局变量，可以把最新元素存在document的data属性里：

$(document).ready(function() {
  // 初始化
  $(document).data('latestRadio', $('input[type="radio"]:checked').last());

  // 监听change事件
  $('input[type="radio"]').on('change', function() {
    $(document).data('latestRadio', $(this));
  });

  // 获取最新选中的元素
  $('#fontPicker i').on('click', function() {
    const latestChecked = $(document).data('latestRadio');
    if (latestChecked) {
      console.log('最新选中的ID:', latestChecked.attr('id'));
    }
  });
});

为什么这个方案可行？ #

单选按钮的change事件只会在用户主动选中某个选项时触发——当你选中b3时，a3会被自动取消选中，但a3不会触发change事件，只有b3会。所以每次触发change的元素，必然是用户刚刚选中的那个，我们只要把它记录下来，就能随时拿到最新的选中项。

内容的提问来源于stack exchange，提问作者Rufus