点击自动给URL添加参数并提交，现有代码求更优实现方案

你的现有代码能正常运行，但可以从语义化、可维护性、分离关注点这几个维度优化，下面是几种更实用的实现方式：

方案1：保留原生表单行为，优化交互与结构 #

原生单选框本来就支持点击label自动选中，没必要隐藏input，反而能保留更好的可访问性（比如键盘导航支持）。同时把JS逻辑从内联事件中抽离，做到HTML与JS分离：

<form id="sortForm" method="get">
  <div>
    <input type="radio" name="orderby" id="price" value="price">
    <label for="price">Price</label>
  </div>
  <div>
    <input type="radio" name="orderby" id="date" value="date">
    <label for="date">Date</label>
  </div>
  <div>
    <input type="radio" name="orderby" id="popularity" value="popularity">
    <label for="popularity">Popularity</label>
  </div>
</form>

<script>
document.getElementById('sortForm').addEventListener('change', function(e) {
  // 仅在单选框状态变化时提交表单
  if (e.target.type === 'radio') {
    this.submit();
  }
});
</script>

优化点： #

• 移除内联onclick和display: none，保留原生控件的可访问性
• JS逻辑集中管理，后续修改或扩展更方便
• 用div包裹每组选项，便于样式控制

方案2：无需表单，直接修改URL跳转 #

如果不需要表单的其他功能，也可以直接通过点击label修改URL并跳转，实现更轻量化：

<div>
  <label data-sort="price">Price</label>
  <label data-sort="date">Date</label>
  <label data-sort="popularity">Popularity</label>
</div>

<script>
document.querySelectorAll('[data-sort]').forEach(label => {
  label.addEventListener('click', function() {
    const sortValue = this.dataset.sort;
    // 保留当前URL的其他参数，仅更新orderby
    const url = new URL(window.location.href);
    url.searchParams.set('orderby', sortValue);
    window.location.href = url.toString();
  });
});
</script>

优化点： #

• 完全移除表单结构，代码更轻量化
• 自动保留现有URL参数，避免丢失分页、筛选等其他查询条件
• 用data属性传递排序值，语义化更强

方案3：结合CSS美化单选框（可选） #

如果想自定义单选框样式，不用隐藏原生input，通过CSS就能实现美化，同时保留原生交互逻辑：

<form id="sortForm" method="get">
  <div class="sort-option">
    <input type="radio" name="orderby" id="price" value="price" class="sort-radio">
    <label for="price" class="sort-label">Price</label>
  </div>
  <div class="sort-option">
    <input type="radio" name="orderby" id="date" value="date" class="sort-radio">
    <label for="date" class="sort-label">Date</label>
  </div>
  <div class="sort-option">
    <input type="radio" name="orderby" id="popularity" value="popularity" class="sort-radio">
    <label for="popularity" class="sort-label">Popularity</label>
  </div>
</form>

<style>
.sort-radio {
  position: absolute;
  opacity: 0;
}

.sort-label {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.sort-radio:checked + .sort-label {
  background-color: #007bff;
  color: white;
}
</style>

<script>
document.getElementById('sortForm').addEventListener('change', function(e) {
  if (e.target.classList.contains('sort-radio')) {
    this.submit();
  }
});
</script>

优化点： #

• 自定义样式的同时，保留原生单选框的所有交互（点击label选中、键盘切换等）
• 样式与结构分离，便于后续维护调整

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