如何使用jQuery将文本框输入值同步赋值给单选按钮的value属性

实现方案 #

你只需要修改两个增减值函数，同时补充输入框手动输入的监听逻辑，就可以实现自定义单选按钮value实时同步输入框数值的效果，具体修改如下：

1. 修改增减值函数，增加同步单选框value的逻辑

每次点击+/-按钮修改输入框数值后，同步把最新值赋值给id为custom的自定义单选按钮：

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
  // 同步更新自定义单选框的value
  document.getElementById('custom').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
  // 同步更新自定义单选框的value
  document.getElementById('custom').value = value;
}

2. 补充输入框手动输入的监听逻辑

如果用户直接在输入框里手动输入数值，也需要同步更新单选框的value，把这段逻辑加到jQuery的ready回调里即可：

$(document).ready(function() {
  // 原有逻辑保留
  $("input[class$='custom-coin']").click(function() {
    $("div.custom-coin").show();
  });
  $("input[class$='fixed-coin']").click(function() {
    $("div.custom-coin").hide();
  });

  // 新增：监听输入框数值变化，同步到自定义单选框
  $('#number').on('input propertychange', function() {
    var curVal = parseInt($(this).val(),10) || 0;
    $('#custom').val(curVal);
  })
});

可选优化

如果需要选中自定义单选按钮的时候，自动把当前输入框的数值同步到单选框value，避免初始value为0的问题，可以在自定义单选框的点击事件里加一行赋值：

$("input[class$='custom-coin']").click(function() {
  $("div.custom-coin").show();
  // 选中自定义单选时同步一次当前输入框的值
  $('#custom').val($('#number').val() || 0);
});

注意：你现有代码中第一个单选按钮的name属性用了中文引号“，建议改成英文引号"，避免后续表单提交时出现取值异常。

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