求助：基于复选框选择修改Anchor标签参数（jQuery实现）

实现思路 #

监听所有复选框的change事件，每次状态变化时收集选中的复选框值，将其与Anchor标签的基础product-code（初始为90）、product-quantity（初始为1）用分号拼接，最后更新Anchor标签的对应属性。

完整代码示例 #

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" product-quantity="1">Order Now!</a>

<script>
$(function() {
  // 监听复选框状态变化
  $('input[type="checkbox"]').on('change', function() {
    // 获取所有选中复选框的值，转为数组
    const selectedValues = $('input[type="checkbox"]:checked').map(function() {
      return $(this).val();
    }).get();

    const $orderBtn = $('.avangate_button');
    // 获取基础编码和数量（若基础值可能动态变化，可从标签属性提取）
    const baseProductCode = '90';
    const baseProductQty = '1';

    // 拼接新的product-code
    let newCode = baseProductCode;
    if (selectedValues.length > 0) {
      newCode += ';' + selectedValues.join(';');
    }

    // 拼接新的product-quantity：每个选中项对应一个"1"
    let newQty = baseProductQty;
    if (selectedValues.length > 0) {
      newQty += ';' + Array(selectedValues.length).fill('1').join(';');
    }

    // 更新Anchor标签的属性
    $orderBtn.attr('product-code', newCode);
    $orderBtn.attr('product-quantity', newQty);
  });
});
</script>

关键代码说明 #

• $(function() { ... })：确保DOM完全加载后再执行脚本，避免找不到元素
• $('input[type="checkbox"]:checked').map(...).get()：筛选出所有选中的复选框，提取它们的value并转为数组
• Array(selectedValues.length).fill('1').join(';')：根据选中项的数量生成对应个数的"1"，用分号连接成字符串
• $orderBtn.attr(...)：更新Anchor标签的自定义属性，完成参数拼接

可选优化 #

如果基础的product-code和product-quantity可能被其他逻辑修改，不要写死固定值，改为从Anchor标签的初始属性中提取基础部分：

// 提取基础编码（取第一个分号前的内容）
const baseProductCode = $orderBtn.attr('product-code').split(';')[0];
// 提取基础数量（取第一个分号前的内容）
const baseProductQty = $orderBtn.attr('product-quantity').split(';')[0];

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