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