如何实现Option1选中项动态修改Option2、Option3的value值并更新总计

AI 小北

2026-6-28

问题描述

我们正在修改一套根据选项动态计算金额的代码，核心需求：

依据Option1的选中项，动态修改Option2和Option3对应选项的value值。例如：
- 选中Option1-1时，Option2-2的value设为-1
- 选中Option1-2时，Option2-2的value设为-2
总计金额需实时同步更新为所有选中选项value的总和

当前代码

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="form-wrap">
  <div class="form-type-radio">
    <div class="form-text">OPTION 1</div>
    <div class="form-item">
      <input type="radio" id="radio-1" name="samename" value="1800000" class="form-radio" checked="checked">
      <label class="option" for="radio-1"><span id="op-title">1-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-2" name="samename" value="2500000" class="form-radio">
      <label class="option" for="radio-2"><span id="op-title">1-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-3" name="samename" value="6000000" class="form-radio">
      <label class="option" for="radio-3"><span id="op-title">1-3</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 2</div>
    <div class="form-item">
      <input type="radio" id="radio-4" name="samename1" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-4"><span id="op-title">2-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-5" name="samename1" value="-700000" class="form-radio">
      <label class="option" for="radio-5"><span id="op-title">2-2</span></label>
    </div>
  </div>
  <div class="form-type-radio">
    <div class="form-text">OPTION 3</div>
    <div class="form-item">
      <input type="radio" id="radio-6" name="samename2" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-6"><span id="op-title">3-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-7" name="samename2" value="2000000" class="form-radio">
      <label class="option" for="radio-7"><span id="op-title">3-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-8" name="samename2" value="-1300000" class="form-radio">
      <label class="option" for="radio-8"><span id="op-title">3-3</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-9" name="samename2" value="-600000" class="form-radio">
      <label class="option" for="radio-9"><span id="op-title">3-4</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 4</div>
    <div class="form-item">
      <input type="radio" id="radio-10" name="samename3" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-10"><span id="op-title">4-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-11" name="samename3" value="100000" class="form-radio">
      <label class="option" for="radio-11"><span id="op-title">4-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-12" name="samename3" value="300000" class="form-radio">
      <label class="option" for="radio-12"><span id="op-title">4-3</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 5</div>
    <div class="form-item">
      <input type="radio" id="radio-13" name="samename4" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-13"><span id="op-title">5-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-14" name="samename4" value="300000" class="form-radio">
      <label class="option" for="radio-14"><span id="op-title">5-2</span></label>
    </div>
  </div>
  <div class="total">TOTAL <span>0</span></div>
</div>

CSS

.form-wrap {
  display: block;
  margin: 0 auto;
  width: 480px;
}

.form-text {
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 15px;
  color: #bbb;
  padding: 0 5px;
}

#fm-title {
  color: #444;
  font-weight: 600;
}

#op-title {
  font-weight: 600;
  font-size: 20px;
  color: #444;
}

.form-item {
  margin-bottom: 5px;
}

.form-item input[type=radio] {
  display: none;
}

.form-type-radio {
  text-align: center;
  margin-bottom: 35px;
}

.form-item input[type=radio]+label {
  display: inline-block;
  cursor: pointer;
  height: 115px;
  width: 480px;
  border: 2px solid #ddd;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  padding: 26px 45px;
  border-radius: 20px;
}

.form-item input[type=radio]+label {
  background-color: #fff;
  color: #bbb;
  font-weight: 400;
}

.form-item input[type=radio]:checked+label {
  background-color: #fff;
  color: #bbb;
  border-color: #444;
}

.total {
  font-size: 22px;
  font-weight: 600;
  height: 65px;
  padding: 15px 15px;
  text-align: center;
  color: #555;
}

#bm-text {
  font-size: 18px;
  width: 100%;
  font-weight: 400;
  color: #555;
  padding: 0 5px;
  margin-bottom: 40px;
}

#bm-text p {
  margin-bottom: 20px;
}

@media (max-width: 991px) {
  .form-wrap {
    width: 100%;
  }
  .form-item input[type=radio]+label {
    width: 100%;
    height: 70px;
    line-height: 1.4;
    padding: 17px 25px;
    font-size: 12px;
    border: 1px solid #ddd;
  }
  .form-text {
    font-size: 14px;
    margin-bottom: 10px;
  }
  #op-title {
    font-size: 13px;
  }
  .form-item {
    margin-bottom: 1px;
  }
  .form-type-radio {
    margin-bottom: 20px;
  }
  .total {
    font-size: 17px;
    font-weight: 500;
    padding: 10px 10px;
    color: #444;
  }
  #bm-text {
    font-size: 12px;
    margin-bottom: 20px;
  }
  #bm-text p {
    margin-bottom: 15px;
  }
}

JavaScript

$('.form-item input').on('change', function() {
  // addition and subtraction here
  var $this;
  var sum = 0;

  $('.form-item input').each(function() {
    $this = $(this);

    if ($this[0].checked == true) {
      sum += parseInt($this.val());
    }

    $('.total span').html(sum.toLocaleString('en-US'));
  })
});

解决方案

核心思路

定义值映射规则：用对象存储Option1每个选项对应的Option2、Option3目标值，方便快速查询
监听Option1变更：选中项改变时，根据映射更新对应选项的value并重新计算总计
独立总计计算函数：将金额计算逻辑封装，确保任何选项变更都能触发更新
初始化执行：页面加载时立即计算初始总计

修改后的JavaScript代码

// 定义Option1选中项对应的Option2、Option3选项值映射
const valueMap = {
  'radio-1': { // Option1-1
    'radio-5': '-1',
    // 可添加Option3其他选项的映射，例如 radio-7: 'xxx'
  },
  'radio-2': { // Option1-2
    'radio-5': '-2',
    // 可添加Option3其他选项的映射
  },
  'radio-3': { // Option1-3
    'radio-5': '-3', // 示例值，可按需修改
    // 可添加Option3其他选项的映射
  }
};

// 计算并更新总计金额
function updateTotal() {
  let sum = 0;
  $('.form-item input:checked').each(function() {
    sum += parseInt($(this).val()) || 0;
  });
  $('.total span').html(sum.toLocaleString('en-US'));
}

// 监听Option1的变更事件
$('input[name="samename"]').on('change', function() {
  const selectedId = $(this).attr('id');
  const targetValues = valueMap[selectedId];
  
  if (targetValues) {
    // 更新对应选项的value
    Object.keys(targetValues).forEach(id => {
      $(`#${id}`).val(targetValues[id]);
    });
    // 重新计算总计
    updateTotal();
  }
});

// 监听所有单选框的变更事件
$('.form-item input').on('change', updateTotal);

// 页面加载完成后初始化总计
$(document).ready(updateTotal);

扩展说明

若需对Option3多个选项设置动态值，只需在valueMap对应Option1的键下添加更多id: 值的键值对
使用parseInt($(this).val()) || 0避免非数字值导致的计算错误
独立的总计函数让逻辑更清晰，后续维护更方便

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

如何实现Option1选中项动态修改Option2、Option3的value值并更新总计

HTML #

CSS #

JavaScript #

核心思路 #

修改后的JavaScript代码 #

扩展说明 #

HTML

CSS

JavaScript

核心思路

修改后的JavaScript代码

扩展说明