location.reload()中断jQuery流程：重载后无法取消复选框选中状态

问题根源 #

你当前的代码逻辑有两个关键问题：

1. 代码执行顺序：location.reload()会立即触发页面刷新，后面的$('.c1').attr('checked', false)根本没机会执行，页面就已经重新加载了。
2. DOM重新渲染：哪怕调换顺序先取消选中再刷新，刷新后页面会重新加载初始HTML，复选框因为HTML里自带checked属性，还是会回到选中状态。

解决方案1：刷新后保持未选中状态（用本地存储） #

通过本地存储记录状态，页面刷新后读取状态再设置复选框，最后清除状态避免影响后续加载：

<div>
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <button id='btn'>SUBMIT</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 页面加载完成后检查状态
    $(document).ready(function() {
        if(localStorage.getItem('uncheckBoxes') === 'true') {
            // 用prop()操作复选框状态，这是jQuery推荐的方式
            $('.c1').prop('checked', false);
            // 清除存储的状态，防止下次打开页面自动取消选中
            localStorage.removeItem('uncheckBoxes');
        }
    });

    $('#btn').click(function(){
        // 先标记需要取消选中的状态
        localStorage.setItem('uncheckBoxes', 'true');
        // 再触发页面刷新
        location.reload();
    }); 
</script>

注意：操作复选框的选中状态时，优先用prop()而不是attr()——attr()操作的是HTML标签上的初始属性值，prop()操作的是元素当前的动态状态。

解决方案2：无需刷新页面时直接取消选中 #

如果业务逻辑不需要刷新页面，直接去掉location.reload()即可：

<div>
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <input type='checkbox' class='c1' name='me' checked />
    <button id='btn'>SUBMIT</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#btn').click(function(){
        $('.c1').prop('checked', false);
        // 去掉location.reload()，避免页面刷新导致操作失效
    }); 
</script>

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