在vue/html中添加单选按钮

前言：

刚刚接触前端的框架，掌握不够牢靠，部分场景实现较困难，在网上找了很多添加单选按钮的博文，并没有达到预期的效果，今天早上终于找到了创建的方法，记录一下。

注：添加的方式基本相同，本文中以vue为例。

可以实现的效果：

①可在单选组内，选择一个选项；

②有多个单选组别；

③在单选组内，固定选择某选项，其他设置为不可选；

效果截图：

---

 

---

图中呈现表示：有两个选项，可任选其一。

不叭叭了，直接上代码：

这里实现的是效果①

<template>
<div class="pageBt">  
    <div class="select_bt">
        <label class="select_bt_label1" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label1_text">烤冷面</div>
        </label>
        <label class="select_bt_label2" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label2_text">手抓饼</div>
        </label>
    </div>
</div>
</template>

<style lang="less">
.pageBt{
    background: white;
    margin-top: 25px;
    padding: 30px;
    width: 100%;
    height: 100%;
    letter-spacing: 1px;
    .select_bt{
        margin-top: 25px;
        .select_bt_label1{
            margin-left: 8%;
            display: inline-block;
        }.select_bt_label1_text{
            font-size: 23px;
            display: inline-block;
        }.select_bt_label2{
            margin-left: 7%;
            display: inline-block;
        }.select_bt_label2_text{
            font-size: 23px;
            display: inline-block;
        }
    }
}
</style>

代码片段说明：

只解释页面内容，对于样式设定不做解释

<template>
<div class="pageBt">  
    <div class="select_bt">
        <label class="select_bt_label1" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label1_text">烤冷面</div>
        </label>
        <label class="select_bt_label2" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label2_text">手抓饼</div>
        </label>
    </div>
</div>
</template>

单选组：

<input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
......
<input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />

这两段代码，可以实现选择方式，其中：

        type：确定呈现类型为单选；

        value：确定所传输给后端的信息；

        name：本单选组的名称，用于区分不同的单选组，使本组内的各选项互斥；

多个单选组，实现效果②：

<template>
<div class="pageBt">  
    <div class="select_bt">
        <label class="select_bt_label1" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label1_text">烤冷面</div>
        </label>
        <label class="select_bt_label2" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="吃啥好呢" />
            <div class="select_bt_label2_text">手抓饼</div>
        </label>
    </div>
    <div class="select_bt2">
        <label class="select_bt_label1" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="喝点啥呢" />
            <div class="select_bt_label1_text">健力宝</div>
        </label>
        <label class="select_bt_label2" for="select_bt_label2_input">
            <input class="select_bt_label2_input" type="radio" value="radio" name="喝点啥呢" />
            <div class="select_bt_label2_text">美年达</div>
        </label>
        <label class="select_bt_label3" for="select_bt_label3_input">
            <input class="select_bt_label3_input" type="radio" value="radio" name="喝点啥呢" />
            <div class="select_bt_label3_text">可乐</div>
        </label>
    </div>
</div>
</template>

<style lang="less">
.pageBt{
    background: white;
    margin-top: 25px;
    padding: 30px;
    width: 100%;
    height: 100%;
    letter-spacing: 1px;
    .select_bt{
        margin-top: 25px;
        .select_bt_label1{
            margin-left: 8%;
            display: inline-block;
        }.select_bt_label1_text{
            font-size: 23px;
            display: inline-block;
        }.select_bt_label2{
            margin-left: 7%;
            display: inline-block;
        }.select_bt_label2_text{
            font-size: 23px;
            display: inline-block;
        }
    }.select_bt2{
        margin-top: 25px;
        .select_bt_label1{
            margin-left: 8%;
            display: inline-block;
        }.select_bt_label1_text{
            font-size: 23px;
            display: inline-block;
        }.select_bt_label2{
            margin-left: 7%;
            display: inline-block;
        }.select_bt_label2_text{
            font-size: 23px;
            display: inline-block;
        }.select_bt_label3{
            margin-left: 7%;
            display: inline-block;
        }.select_bt_label3_text{
            font-size: 23px;
            display: inline-block;
        }
    }
}
</style>

原理和实现效果①相同，就不具体解释了，只是新添另一个组：

......
<input class="select_bt_label2_input" type="radio" value="radio" name="喝点啥呢" />
......

新增单选组的名称为“喝点啥呢”

效果图：

---

---

若实现效果③，则需先设定某选项为备选则状态，其他选项设置为不可选：

<input class="..." type="radio" value="radio" name="吃啥好呢" disabled/>
......
<input class="..." type="radio" value="radio" name="吃啥好呢" checked/>

 其中，末尾处的“disabled”表示禁用此选项；“checked”表示初始状态为选中状态：

当项目较多时，可以分为两个选项组，可选组及不可选组，设定不可选组的内容为禁用状态。

以上就是这次的总结，第一次写，不知道有需要的小伙伴能不能看明白，请大家批评指正！