JavaScript如何在change事件函数外获取radio单选按钮选中值

你代码里的全局变量date_value实际已经在单选按钮切换时被正确更新了，你看到的date_value未更新的错觉，来自于最后一行打印语句的执行时机问题：

• 最后一行console.log('date value'+date_value)是JS脚本加载完成后立即执行的，此时还没有触发过任何单选按钮的change事件，所以永远只会打印初始值2
• 只有触发单选按钮点击之后，change回调里的赋值逻辑才会执行，此时date_value才会被修改为最新值

你可以通过以下两种方式确认date_value已经正确更新：

1. 在change回调里同步打印date_value

var date_value=2;        
var $radios = $('input[name=daterange]').change(function () {
    var value = $radios.filter(':checked').val();
    console.log('当前选中的value:'+value);
    date_value = value;
    // 新增打印，每次切换单选都会输出最新的date_value
    console.log('更新后的date_value:'+date_value);
});

2. 新增一个测试按钮，主动触发查看当前date_value的值

<!-- 新增测试按钮 -->
<button id="testBtn">查看当前date_value</button>

// 新增按钮点击逻辑
$('#testBtn').click(function(){
    console.log('当前全局date_value的值为:'+date_value);
})

如果需要在其他业务逻辑里使用单选按钮的最新值，建议不要依赖全局变量的异步更新时机，可以选择两种更稳妥的写法：

1. 每次需要取值时主动获取当前选中项的值，无需维护全局变量：

// 封装成通用方法，随时调用都能拿到最新值
function getCurrentDateRange() {
    return $('input[name=daterange]:checked').val();
}
// 其他业务逻辑需要取值时直接调用即可
console.log(getCurrentDateRange());

2. 在change回调里直接调用后续处理逻辑，避免全局变量污染：

$('input[name=daterange]').change(function () {
    const currentValue = $(this).val();
    // 直接把最新值传给后续需要用的业务函数
    handleDateChange(currentValue);
});

function handleDateChange(value) {
    // 这里写切换日期范围后的业务逻辑
    console.log('处理最新的日期范围值:', value);
}

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