求助：实现产品与变体复选框组合的9种不同跳转链接功能

下面是实现需求的完整代码，包含单选产品容器、限制单选的变体复选框容器，以及组合跳转逻辑：

HTML 结构 #

<div class="product-container">
  <h3>选择产品</h3>
  <label><input type="radio" name="product" value="product1"> 产品1</label>
  <label><input type="radio" name="product" value="product2"> 产品2</label>
  <label><input type="radio" name="product" value="product3"> 产品3</label>
</div>

<div class="variant-container">
  <h3>选择变体</h3>
  <label><input type="checkbox" name="variant" value="variant1"> 变体1</label>
  <label><input type="checkbox" name="variant" value="variant2"> 变体2</label>
  <label><input type="checkbox" name="variant" value="variant3"> 变体3</label>
</div>

<!-- 如果需要手动触发跳转就保留按钮，自动跳转可以删掉 -->
<button id="submit-btn">确认跳转</button>

JavaScript 逻辑 #

手动跳转版（点击按钮跳转） #

// 限制变体复选框只能选中一个，满足一对一组合需求
document.querySelectorAll('input[name="variant"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      document.querySelectorAll('input[name="variant"]').forEach(other => {
        if (other !== this) other.checked = false;
      });
    }
  });
});

// 定义所有产品+变体组合对应的URL，按"产品值-变体值"作为键名
const urlMapping = {
  'product1-variant1': 'https://your-target-url-1.com',
  'product1-variant2': 'https://your-target-url-2.com',
  'product1-variant3': 'https://your-target-url-3.com',
  'product2-variant1': 'https://your-target-url-4.com',
  'product2-variant2': 'https://your-target-url-5.com',
  'product2-variant3': 'https://your-target-url-6.com',
  'product3-variant1': 'https://your-target-url-7.com',
  'product3-variant2': 'https://your-target-url-8.com',
  'product3-variant3': 'https://your-target-url-9.com'
};

// 点击按钮时执行跳转
document.getElementById('submit-btn').addEventListener('click', () => {
  const selectedProduct = document.querySelector('input[name="product"]:checked')?.value;
  const selectedVariant = document.querySelector('input[name="variant"]:checked')?.value;

  if (!selectedProduct || !selectedVariant) {
    alert('请选择产品和变体');
    return;
  }

  const targetKey = `${selectedProduct}-${selectedVariant}`;
  const targetUrl = urlMapping[targetKey];
  
  if (targetUrl) {
    window.location.href = targetUrl;
  } else {
    alert('未找到对应链接，请检查配置');
  }
});

自动跳转版（选完自动跳转） #

如果不需要手动点击按钮，选择后直接跳转，替换JS代码为：

// 限制变体复选框单选逻辑
document.querySelectorAll('input[name="variant"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      document.querySelectorAll('input[name="variant"]').forEach(other => {
        if (other !== this) other.checked = false;
      });
    }
    checkSelectionAndRedirect();
  });
});

// 产品单选变化时触发检查
document.querySelectorAll('input[name="product"]').forEach(radio => {
  radio.addEventListener('change', checkSelectionAndRedirect);
});

// URL映射表
const urlMapping = {
  'product1-variant1': 'https://your-target-url-1.com',
  'product1-variant2': 'https://your-target-url-2.com',
  'product1-variant3': 'https://your-target-url-3.com',
  'product2-variant1': 'https://your-target-url-4.com',
  'product2-variant2': 'https://your-target-url-5.com',
  'product2-variant3': 'https://your-target-url-6.com',
  'product3-variant1': 'https://your-target-url-7.com',
  'product3-variant2': 'https://your-target-url-8.com',
  'product3-variant3': 'https://your-target-url-9.com'
};

// 检查选择并执行跳转的通用函数
function checkSelectionAndRedirect() {
  const selectedProduct = document.querySelector('input[name="product"]:checked')?.value;
  const selectedVariant = document.querySelector('input[name="variant"]:checked')?.value;

  if (selectedProduct && selectedVariant) {
    const targetKey = `${selectedProduct}-${selectedVariant}`;
    const targetUrl = urlMapping[targetKey];
    if (targetUrl) window.location.href = targetUrl;
  }
}

关键说明 #

• 变体复选框通过JS限制只能选中一个，既满足你要求的"复选框容器"形式，又能保证产品和变体的一对一组合（3×3=9个URL）
• URL映射表采用键值对形式，便于维护和修改，直接替换对应URL即可
• 添加了基础校验逻辑，避免用户未选择就触发跳转

内容的提问来源于stack exchange，提问作者Marcelo Dos Santos