使用button标签模拟单选按钮时首个选项默认未选中如何解决

问题根源 #

1. <button> 标签本身不支持原生 checked 属性，你在HTML中给第一个按钮添加的 checked="checked" 属于无效自定义属性，浏览器不会据此做任何样式处理。
2. 现有JS逻辑仅绑定了点击后的样式切换行为，页面初始化加载时没有主动给首个按钮添加选中态样式类。

解决方法 #

两种方案二选一即可：

方案1：直接修改HTML结构 #

删掉第一个按钮的无效 checked 属性，直接给它默认加上选中态样式类：
把第一个的属性从

<button id="UnStitched" name="Stitched" Value="Un-Stitched"  class="radio-btn" type="button" checked="checked" >Un-Stitched</button>

修改为

<button id="UnStitched" name="Stitched" Value="Un-Stitched"  class="radio-btn-selected" type="button" >Un-Stitched</button>

方案2：通过JS代码自动初始化 #

在现有JS逻辑末尾添加一行代码，页面加载完成后自动给第一个按钮设置选中状态：

// 原有JS代码保留，新增下面一行即可
$('.radio-btn').first().removeClass('radio-btn').addClass('radio-btn-selected');

修改后完整可运行代码 #

<STYLE TYPE="text/css">
.radio-btn-row{display:flex;flex-direction:row;justify-content:center;margin-top: 20px; float:left;}
.radio-btn-wrapper{margin:0px 4px;}
.radio-btn{background-color:#FFFFFF;border:1px solid #666;color:#000;font-size:13px;line-height:26px; width:80px;outline:none;cursor: pointer;}
.radio-btn-selected{background-color:#555;border:1px solid #fff;color:#fff;font-size:13px;line-height:26px; width:80px;outline:none;}
</STYLE >

<div class="radio-btn-row"  style="margin-left: auto;margin-right: 0;">
    <div class="radio-btn-wrapper">
        <!-- 这里直接给第一个按钮默认加选中类，删掉无用的checked属性 -->
        <button id="UnStitched" name="Stitched" Value="Un-Stitched"  class="radio-btn-selected" type="button" >Un-Stitched</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="Stitch1" name="Stitched" Value="Stitch1" class="radio-btn" type="button">Stitched</button>
    </div>    
</div>

<script>
$.each($('.radio-btn'), function (key, value) {
        $(this).click(function (e) {
            $('.radio-btn-selected')
                .removeClass('radio-btn-selected')
                .addClass('radio-btn');

            $(this)
                .removeClass('radio-btn')
                .addClass('radio-btn-selected'); 
            });
    });
</script> 

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