如何通过单选按钮+按钮点击用jQuery修改div颜色与背景色？原代码失效

原代码存在的问题 #

• 第二个单选按钮的选择器错误：$('txtelement2') 缺少ID选择符#，且大小写与实际IDtxtElement2不匹配，导致判断失效
• 单选按钮未设置name属性，无法实现互斥选择（用户可同时勾选两个选项）
• 重复定义变量txtElement，代码冗余

修复后的完整代码 #

<body>
    <input type="radio" id="txtElement3" name="colorType" />Voorgrond<br />
    <input type="radio" id="txtElement2" name="colorType" />Achtergrond<br />
    <input type="text" id="txtElement" placeholder="输入颜色值（如red、#ff0000）">
    <button id="btnKnop1">Stel kleur in</button>
    <div id="divResult">Voorbeeld tekst</div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnKnop1").on('click', function () {
                const colorValue = $('#txtElement').val().trim();
                if (!colorValue) {
                    alert('请输入颜色值');
                    return;
                }

                if ($('#txtElement3').is(':checked')) {
                    $('#divResult').css('color', colorValue);
                } else if ($('#txtElement2').is(':checked')) {
                    $('#divResult').css('background-color', colorValue);
                } else {
                    alert('请选择修改类型（前景/背景）');
                }
            })
        })
    </script>
</body>

关键修改说明 #

• 给两个单选按钮添加相同的name="colorType"属性，确保同一时间仅能选中一个选项
• 修正第二个选择器为$('#txtElement2')，正确匹配目标元素
• 提取颜色值变量到判断逻辑前，避免重复声明，同时增加空值校验
• 补充未选择选项时的提示逻辑，提升用户体验
• 引入jQuery的CDN链接（原代码未显示引入，需确保页面能加载jQuery）

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