使用JQuery切换地图比例尺控件异常：勾选显示但取消勾选不隐藏

嘿，刚接触jQuery踩点小坑很正常，我帮你分析下为啥取消勾选时比例尺藏不起来，还有怎么修复：

问题根源 #

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

1. 重复绑定事件：写了两次$(document).ready和两次change事件绑定，不仅冗余还可能导致逻辑冲突
2. 变量作用域问题：scaleLine是在勾选状态的代码块里定义的，这个变量的作用域只限于那个if块内部，当取消勾选进入else分支时，根本找不到这个变量，自然执行不了map.removeControl(scaleLine)

修正后的代码 #

JS代码

$(document).ready(function() {
    // 把scaleLine变量提升到change事件外部，让两个分支都能访问
    let scaleLine;
    $("input[name='featured_ad']").on("change", function() {
        const isChecked = $(this).prop("checked");
        
        // 用toggle简化按钮区域的显示隐藏逻辑
        $(".buttons").toggle(isChecked);
        
        if (isChecked) {
            $("#checksl").prop("checked", true);
            // 创建比例尺控件并添加到地图
            scaleLine = L.control.scale();
            map.addControl(scaleLine);
        } else {
            // 先判断scaleLine是否存在，避免首次取消时报错
            if (scaleLine) {
                map.removeControl(scaleLine);
                scaleLine = null; // 重置变量，确保下次勾选时重新创建
            }
        }
    });
});

HTML代码（保持不变，需确保map变量全局可访问）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input name="featured_ad" value="1" type="checkbox"/>Map Scale
    <div id="radio" class="buttons">
        <input type="radio" name="ad_pack_id" id="checksl"/>Scale bar<br/>
    </div>
</div>

关键修改说明 #

• 提升变量作用域：把scaleLine放在change事件外面，让勾选和取消勾选的逻辑都能操作同一个控件实例
• 合并冗余代码：去掉重复的事件绑定，用一个$(document).ready统一处理
• 简化显示隐藏：用toggle(isChecked)替代分开的show()和hide()，代码更简洁
• 添加安全判断：移除控件前先检查scaleLine是否存在，避免页面加载后直接取消勾选出现错误
• 重置变量：移除控件后把scaleLine设为null，确保下次勾选时创建新的控件实例

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