如何使用jQuery根据单选按钮选择更新日期选择器字段？

问题分析 #

你的现有代码存在以下几个问题：

• 仅监听了第一个单选按钮的点击事件，其余4个选项无响应
• 代码中存在不必要的trigger('click')，会导致事件循环触发
• 日期计算逻辑错误，未实现"今日起N个月后"的需求，仅设置了当前日期
• 未适配页面中日期选择器的格式要求

修正后的完整代码 #

// 给所有同组单选按钮绑定change事件
$('input[name="custom_39"]').on('change', function() {
    if (!$(this).is(':checked')) return;
    
    // 根据选中项的value计算要添加的总月份数
    const addMonths = parseInt($(this).val()) * 12;
    const now = new Date();
    
    // 计算目标日期：自动处理月份进位、月底日期调整问题
    const targetDate = new Date(now.getFullYear(), now.getMonth() + addMonths, now.getDate());
    
    // 格式化日期为dd/mm/yyyy（适配页面显示的日期选择器）
    const day = String(targetDate.getDate()).padStart(2, '0');
    const month = String(targetDate.getMonth() + 1).padStart(2, '0');
    const year = targetDate.getFullYear();
    const displayDate = `${day}/${month}/${year}`;
    
    // 格式化日期为yyyy-mm-dd（适配隐藏的实际提交字段）
    const submitDate = `${year}-${month}-${day}`;
    
    // 更新隐藏的提交字段
    $('#custom_41').val(submitDate);
    // 更新显示用的日期选择器输入框（规避动态ID问题）
    $('.crm-form-date.hasDatepicker').val(displayDate);
});

代码说明 #

1. 事件绑定：通过input[name="custom_39"]选中所有同组单选按钮，绑定change事件（仅当选中状态改变时触发，比click更精准）
2. 月份计算：利用单选按钮的value值（1-5）乘以12，得到要添加的总月份数
3. 日期处理：使用Date对象构造函数直接计算目标日期，自动处理月份超过12时的年份进位，以及月底日期的自动调整（如31号加1个月到4月会自动转为30号）
4. 格式适配：生成两种格式的日期，分别适配显示用输入框和实际提交字段
5. 元素选择：通过类选择器选择显示用输入框，避免动态ID带来的选择失效问题

可选优化 #

如果日期选择器需要触发内部更新逻辑，可在设置值后添加触发事件：

$('.crm-form-date.hasDatepicker').val(displayDate).trigger('change');

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