如何在复选框被勾选时将用户跳转至不同页面？

这里有两种简单可靠的方法来实现你的需求，核心是通过JavaScript在表单提交前判断复选框状态，动态调整跳转目标：

方法1：动态修改表单的action属性 #

这种方法最贴合表单的原生提交行为，只需要在提交前修改表单的目标路径即可，表单会自动携带所有输入参数（比如关键词、复选框状态）。

首先给表单和复选框添加ID，方便JavaScript获取元素：

<form id="searchForm" enctype="multipart/form-data" method="GET" action="">
  <div class="box-body">
    <input class="form-control input-lg" name="keyword" type="text" placeholder="Masukkan kata kunci">
  </div>
  <div class="box-body">
    <input value="1" type="checkbox" class="minimal" name="queryexp" id="queryexp" /> Gunakan query expansion
  </div>
  <div class="box-footer">
    <button type="submit" class="btn btn-primary" value="Submit">Submit</button>
  </div>
</form>

然后添加JavaScript监听表单提交事件：

document.getElementById('searchForm').addEventListener('submit', function(e) {
  // 获取复选框的勾选状态
  const isExpansionChecked = document.getElementById('queryexp').checked;
  
  // 根据状态设置不同的跳转目标
  if (isExpansionChecked) {
    this.action = '/search-with-expansion'; // 替换为你的"开启查询扩展"页面路径
  } else {
    this.action = '/regular-search'; // 替换为你的普通搜索页面路径
  }
  
  // 不需要阻止默认行为，表单会用新的action自动提交
});

说明：这个方法会保留原表单的GET提交方式，所有表单参数（比如keyword和queryexp）都会自动拼接到目标URL的查询字符串中。另外，如果你没有文件上传需求，enctype="multipart/form-data"可以去掉，用默认的application/x-www-form-urlencoded即可，更适合文本提交场景。

方法2：手动构造URL并跳转 #

如果你需要更灵活地控制跳转URL（比如自定义参数格式），可以阻止表单的默认提交行为，手动构造目标URL并跳转：

document.getElementById('searchForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交
  
  // 获取输入框的值，注意编码避免URL错误
  const keyword = encodeURIComponent(document.querySelector('input[name="keyword"]').value);
  const isExpansionChecked = document.getElementById('queryexp').checked;
  
  let targetUrl;
  if (isExpansionChecked) {
    targetUrl = `/search-with-expansion?keyword=${keyword}&queryexp=1`;
  } else {
    targetUrl = `/regular-search?keyword=${keyword}`;
  }
  
  // 跳转到目标页面
  window.location.href = targetUrl;
});

说明：这种方法完全由你控制URL的结构，适合需要对参数做额外处理的场景，比如添加额外参数或者调整参数顺序。记得用encodeURIComponent处理用户输入的关键词，避免特殊字符导致URL无效。

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