JavaScript实现单选按钮未选中时执行操作，无需判断其他单选状态

原代码的else分支永远无法触发，核心逻辑存在两个硬伤：

• 事件回调是绑定在目标单选按钮#raster本身的，只有直接点击这个按钮时，回调才会执行
• 浏览器的单选按钮默认交互逻辑是：点击任意单选按钮时，会直接把被点击的按钮的checked属性设为true，因此回调执行时读取this.checked永远为真，根本不会进入未选中的else分支

简单来说，你永远无法通过点击#raster本身，让它处于未选中状态——同组单选的取消选中动作，只能通过点击其他同组按钮完成，而这个动作根本不会触发绑定在#raster上的click事件，else分支自然永远跑不到。

完全不需要编写「判断其他单选按钮是否选中」的逻辑，只需要把事件监听的触发源从目标按钮本身，调整为监听整个同组单选的交互动作，利用事件冒泡捕获同组按钮的点击，回调里直接读取目标按钮自身的checked状态做判断即可：

• 全程没有代码读取其他同组按钮的选中属性，判断逻辑完全围绕目标按钮自身状态展开
• 不管是点击目标按钮将其选中，还是点击其他同组按钮将其取消选中，只要目标按钮的状态发生变化，就能触发对应分支的逻辑

修正后的测试代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="radio" name="layerButton" value="Tiled">Tiled Layer
    <input type="radio" name="layerButton" value="UnTiled" id="raster" >Raster Layer

    <script>
        const targetRadio = document.getElementById('raster');
        // 全局监听点击事件，通过冒泡捕获同组单选的交互
        document.addEventListener('click', function(e) {
            // 过滤非目标单选组的点击动作
            if (e.target.name !== 'layerButton') return;
            // 仅读取目标按钮的自身状态做分支判断
            if (targetRadio.checked) {
                alert("Raster单选处于选中状态");
            } else {
                alert("Raster单选处于未选中状态");
            }
        })
    </script>
</body>
</html>

实现说明：上述逻辑没有任何对其他同组单选按钮状态的查询、判断，完全按照要求仅针对目标按钮自身的未选中状态触发else分支，不需要依赖其他按钮的选中结果做判断。

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