求助：基于单选按钮动态替换URL中location参数的实现问题

我帮你梳理下当前代码里的几个关键问题，然后给出能正常运行的修正版本：

问题分析 #

你的代码目前有几个导致无法生效的核心问题：

• 传参错误：单选按钮点击时传入的mtl/frkfrt是元素ID，但并非有效的数值或变量，浏览器会直接报错找不到这些变量，应该传入对应location的具体数值（比如Montreal对应101，Frankfurt对应102这类）。
• replace操作未保存结果：你调用了replace方法生成新URL，但没有把这个新值赋值回a标签的href属性，相当于只做了替换计算却没应用到页面元素上。
• 变量未正确插入字符串："&location=loc"里的loc是函数参数，但直接写在字符串里会被当成普通文本，需要用字符串拼接或模板字符串的方式引入变量。
• 匹配范围太窄：只固定替换&location=100，如果后续href里的location数值变化，就无法匹配替换，应该用正则表达式匹配任意数字的location参数。

修正后的代码 #

JavaScript 部分 #

function getlocation(loc) {
  // 只选中带button类的a标签，避免误改页面其他链接
  $('a.button').each(function() {
    // 获取当前a标签的href值
    let currentHref = $(this).attr('href');
    // 用正则匹配任意数字的location参数，支持?location=xxx或&location=xxx两种格式
    let newHref = currentHref.replace(/([?&])location=\d+/g, `$1location=${loc}`);
    // 将替换后的新URL赋值回href属性，完成修改
    $(this).attr('href', newHref);
    console.log('替换后的URL:', newHref);
  });
}

HTML 部分 #

<a class="button" href="#get.php?location=100">Test</a>
<br><br>
<a class="button" href="#get.php&location=100">Test</a>
<br><br>
<fieldset>
  <!-- 给单选框添加value属性，存储对应的location数值 -->
  <input id="mtl" name="location" type="radio" checked value="101">
  <label for="mtl" onclick="getlocation(101)">Montreal</label>
  <br><br>
  <input id="frkfrt" name="location" type="radio" value="102">
  <label for="frkfrt" onclick="getlocation(102)">Frankfurt</label>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

关键改进点说明 #

• 传参逻辑修正：直接在onclick事件中传入对应location的具体数值，避免引用不存在的变量。
• 正则匹配优化：用/([?&])location=\d+/g匹配URL中所有?location=数字或&location=数字的部分，确保不管原来的数值是什么都能被替换。
• 结果赋值生效：通过attr('href', newHref)把替换后的新URL设置回a标签，让修改真正应用到页面上。
• 精准选择元素：用$('a.button')只选中目标a标签，防止误修改页面其他无关链接。

进阶优化（推荐） #

如果你想让代码更规范，避免使用inline onclick事件，可以改用jQuery的事件绑定方式：

$(document).ready(function() {
  // 监听单选框的change事件
  $('input[name="location"]').on('change', function() {
    let loc = $(this).val();
    $('a.button').each(function() {
      let currentHref = $(this).attr('href');
      let newHref = currentHref.replace(/([?&])location=\d+/g, `$1location=${loc}`);
      $(this).attr('href', newHref);
      console.log('替换后的URL:', newHref);
    });
  });
});

对应的HTML可以去掉label里的onclick属性，代码更简洁：

<fieldset>
  <input id="mtl" name="location" type="radio" checked value="101">
  <label for="mtl">Montreal</label>
  <br><br>
  <input id="frkfrt" name="location" type="radio" value="102">
  <label for="frkfrt">Frankfurt</label>
</fieldset>

这样的写法更符合前端开发的最佳实践，也更容易维护~

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