前言：
刚刚接触前端的框架，掌握不够牢靠，部分场景实现较困难，在网上找了很多添加单选按钮的博文，并没有达到预期的效果，今天早上终于找到了创建的方法，记录一下。
注：添加的方式基本相同，本文中以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”表示初始状态为选中状态：
当项目较多时，可以分为两个选项组，可选组及不可选组，设定不可选组的内容为禁用状态。
以上就是这次的总结，第一次写，不知道有需要的小伙伴能不能看明白，请大家批评指正！
