1. 效果

单选框的效果丝滑流畅
选中效果↓

取消选择的效果

2. 使用说明

2.1 `createRadiobox()`

该函数用来创建单选框

createRadiobox(id, value, name, color_R, color_G, color_B)

参数	说明
`id`	必须。参数类型为`String`。要作为单选框的元素的id。
`value`	必须。参数类型为`String`。单选框的值。
`name`	必须。参数类型为`String`。单选框的name属性。
`color_R`	必须。参数类型为`Int`，大小位于0~255之间。单选框RGB颜色的R值。
`color_G`	必须。参数类型为`Int`，大小位于0~255之间。单选框RGB颜色的G值。
`color_B`	必须。参数类型为`Int`，大小位于0~255之间。单选框RGB颜色的B值。

2.2 `getRadioValue()`

该函数用来获取单选框的值

getRadioValue(boxid)

参数	说明
`boxid`	必须。参数类型为`String`。要获取值的单选框的元素的id。

2.3 `getChecked()`

该函数用来获取单选框的选中状态。如果选中则返回true，如果未选中返回false

getChecked(boxid)

参数	说明
`boxid`	必须。参数类型为`String`。要获取选中状态的单选框的元素的id。

2.4 `getCheckedByName()`

该函数用来获得选中的单选框的value。输入单选框的name，返回name里被选中的单选框的value，若该name的单选框均未被选中，则返回null

getCheckedByName(radiosname)

参数	说明
`radiosname`	必须。参数类型为`String`。要获取选中的值的一系列单选框的name。

3. 示例

在使用时只需引入CSS和JavaScript文件，并用createRadiobox()函数创建对应的单选框即可。

<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>单选框按钮动效</title><link type="text/css" rel="stylesheet" href="css&js/main.css" />
</head><body><div id="blueRadioBox"></div><br><div id="greenRadioBox"></div><br><div id="redRadioBox"></div><br><div id="yellowRadioBox"></div>
</body><script type="text/javascript" src="css&js/main.js"></script>
<script type="text/javascript">// 创建单选框createRadiobox('blueRadioBox', '蓝色单选框', '颜色', 68, 138, 255);createRadiobox('greenRadioBox', '绿色单选框', '颜色', 1, 199, 106);createRadiobox('redRadioBox', '红色单选框', '颜色', 228, 77, 38);createRadiobox('yellowRadioBox', '黄色单选框', '颜色', 255, 202, 40);
</script></html>

网页会产生四个单选框，分别是蓝色，绿色，红色，黄色，并且四个单选框的name均为颜色，即同时只会有一个单选框被选中。

4. 附加说明

如果需要和文字绑定，也同样可以使用<label>标签来完成，只需把<label>标签放在对应的单选框元素后面，映射好id即可。

多选框的美化和动效参见《HTML多选框美化和动效插件》

HTML单选框美化和动效插件相关推荐

HTML多选框美化和动效插件
1. 效果多选框的效果丝滑流畅选中效果↓ 取消选择的效果 2. 使用说明 2.1 createCheckbox() 该函数用来创建多选框 createCheckbox(id, value, col ...
ae教程（七）动效插件（三）炫彩图案
示例3:炫彩图案首先新建合成,新建黑色纯色层,添加效果生成单元格图案展开平铺选项启用平铺单元数量均为16 拖动到合成起点,激活关键帧,参数如下添加 CC Radial Fast Bl ...
PS动效插件imagemotion汉化版
为大家分享最新汉化的PS动感映像插件Imagemotion for mac,适用于最新版本的photoshop 2019,imagemotion mac版可以将静态图像转换为动态的效果,轻松制作烟雾. ...
初识DoozyUI动效插件
1.在开始之前需要提前安装的插件 DoozyUI Complete UI Management System .DotweenPro 2.软件界面官网:https://www.doozyui.com ...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery Ribbles插件可以很容易的为背景图片引入水珠掉落水面时所产生的涟漪动画特效. 首先引入jQuery脚本和jQuery Ribbles插件脚本: <script src=&q ...
ae教程（七）动效插件（一）古街飘雪
示例1:古街飘雪本例中主要应用Particular创建纷纷飘落的雪花,然后指定地面图层,通过设置粒子的碰撞参数完成雪花在地面上堆积的效果导入素材,最好是一段视频,新建合成,将素材拖入时间线中添加 ...
【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面，Picker It~
vue-particles: 安装 npm install vue-particles --save-dev 引入 main.ts import Vue from 'vue' import VuePa ...
ae教程（七）动效插件（二）定向爆破
示例2:定向爆破定向爆破就是只破坏楼群中指定的高楼,而不会伤及其他,本示例主要学习的是碎片效果新建合成,新建白色纯色层,添加梯度渐变选择径向渐变预合成移动全部属性至新合成导入一张楼群 ...
html input单选样式,input单选框美化——自定义样式
方法一: 给input添加 -webkit-appearance: none; 隐藏默认样式.然后添加自己的样式就好了. 例如: .radioBox input{ -webkit-appearance ...

HTML单选框美化和动效插件

1. 效果

2. 使用说明

2.1 `createRadiobox()`

2.2 `getRadioValue()`

2.3 `getChecked()`

2.4 `getCheckedByName()`

3. 示例

4. 附加说明

HTML单选框美化和动效插件相关推荐

最新文章

热门文章

HTML单选框美化和动效插件

1. 效果

2. 使用说明

2.1 createRadiobox()

2.2 getRadioValue()

2.3 getChecked()

2.4 getCheckedByName()

3. 示例

4. 附加说明

HTML单选框美化和动效插件相关推荐

最新文章

热门文章

2.1 `createRadiobox()`

2.2 `getRadioValue()`

2.3 `getChecked()`

2.4 `getCheckedByName()`