『前端日志』基于Bootstrap框架实现单选按钮组

最新推荐文章于 2024-09-02 07:58:44 发布

原创

最新推荐文章于 2024-09-02 07:58:44 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

本文记录如何基于Bootstrap框架创建一组单选按钮，当点击任一按钮时，该按钮呈现按下状态，其他按钮保持未按下。同时为每个按钮添加触发特定功能的事件。文章提到了尝试使用data-toggle="buttons-radio"属性但未成功，以及参考他人代码的问题。

目标：生成连在一起的三个按钮，点击任意一个按钮，该按钮会显示按下的样式，而另外两个按钮是未按下的样式。同时，为三个按钮分别添加触发函数。

问题：其实是参考的别人的代码，只是不太好找，所以记录一下。

代码：

<!--以input和label实现的单选按钮组-->                    
<div style="float : right" class="btn-group" data-toggle="buttons">
    <span style="float : left; margin-top : 7px">View by : &nbsp;</span>                
    <label id="userProfile" for="" class="btn btn-default active" onclick="userShow()">               
        <input type="radio" name="switch" autocomplete="off">User profile           
    </label>                         
    <label id="quotaStatus" for="" class="btn btn-default" onclick="quotaShow()">                 
        <input type="radio" name="switch" autocomplete="off">Quota status             
    </label>
    <label id="idcardInfo" for="" class="btn btn-default" onclick="idShow()">                 
        <inpu