如何让radio单选框onchange事件生效并匹配对应计算逻辑

核心要完成3个目标：

• 给单选框补全对应value值，和下拉选择框做双向状态同步，避免两个控件模式冲突
• 单选/下拉切换时统一触发输入框值自动换算
• 提交计算时根据当前选中的模式匹配对应的计算规则

具体修改代码 #

1. 调整后的HTML部分 #

主要给两个单选框补全value属性，移除下拉框的内联事件，统一用jQuery绑定逻辑：

<!DOCTYPE html>
<html>
  <body>
    <div class="form-group">
      <label for="multiplier">Increase on loss:</label> 
      <input type="text" class="form-control" id="multiplier" value="2" placeholder="Enter multiplier" pattern="^\d*(\.\d{0,8})?$" required />
      <select id="selectMode">
        <option value="usingMultiplier">X</option>
        <option value="usingPercentage">%</option>
      </select>
    </div>
    
    <!-- 倍率/百分比模式单选 -->
    <div class="custom-control custom-radio custom-control-inline small">
      <input type="radio" id="usingMultiplier" name="usingMultiplier" class="custom-control-input" value="usingMultiplier" checked>
      <label class="custom-control-label" for="usingMultiplier">using multiplier <i class="fas fa-times"></i></label>
    </div>
    <div class="custom-control custom-radio custom-control-inline small">
      <input type="radio" id="usingPercentage" name="usingMultiplier" class="custom-control-input" value="usingPercentage">
      <label class="custom-control-label" for="usingPercentage">using percentage <i class="fas fa-percentage"></i></label>
    </div>
    <button id="submitBtn">计算</button>
    <p>计算结果：<span id="result"></span></p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  </body>
</html>

2. 调整后的JS逻辑 #

包含控件双向同步、值换算、提交计算三部分：

// 统一的模式切换值换算函数
function changeIncreaseMode() {
  // 统一从单选组读取当前选中模式，避免下拉和单选状态不一致
  let currentMode = $("input[name='usingMultiplier']:checked").val();
  let multiplier = parseFloat($("#multiplier").val());
  // 处理空值/非法输入
  if(isNaN(multiplier)) multiplier = 0;
  
  let finalVal;
  if(currentMode == 'usingMultiplier'){
    // 百分比转倍率：百分比值/100 +1
    finalVal = (multiplier/100) + 1;
  } else {
    // 倍率转百分比：(倍率值 -1)*100
    finalVal = (multiplier - 1) * 100;
  }

  $("#multiplier").val(finalVal.toFixed(2));  
}

// 页面加载完成后绑定事件
$(function(){
  // 下拉切换时：同步单选选中状态，触发换算
  $("#selectMode").on("change", function(){
    let selectVal = $(this).val();
    $(`input[name='usingMultiplier'][value='${selectVal}']`).prop("checked", true);
    changeIncreaseMode();
  })

  // 单选切换时：同步下拉选中状态，触发换算
  $("input[name='usingMultiplier']").on("change", function(){
    let radioVal = $(this).val();
    $("#selectMode").val(radioVal);
    changeIncreaseMode();
  })

  // 提交按钮计算逻辑
  $("#submitBtn").on("click", function(){
    // 替换成你实际的base_bet初始值
    let base_bet = 100;
    let multiplier = parseFloat($("#multiplier").val());
    let currentMode = $("input[name='usingMultiplier']:checked").val();

    if(currentMode == 'usingMultiplier'){
      // 倍率模式计算逻辑
      base_bet = multiplier * base_bet;
    }else{
      // 百分比模式计算逻辑
      base_bet = multiplier / 100 * base_bet + base_bet;
    }

    // 替换成你自己的结果展示逻辑
    $("#result").text(base_bet.toFixed(2));
  })
})

逻辑说明 #

• 单选、下拉选择框双向同步状态，操作任意一个入口切换模式，另一个控件会自动对应选中，不会出现模式不匹配的问题
• 值换算逻辑完全沿用原有写法，仅统一了当前模式的取值来源，避免两个控件状态不一致导致换算错误
• 提交计算时直接读取当前选中的单选值匹配对应计算规则，不需要额外维护全局状态变量

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