HTML单选框美化和动效插件

最新推荐文章于 2024-08-03 00:35:09 发布

菡萏_花开

最新推荐文章于 2024-08-03 00:35:09 发布

阅读量732

点赞数 1

分类专栏：有趣实用的JavaScript插件网页美化和动效文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/weixin_43839749/article/details/106004534

版权

有趣实用的JavaScript插件同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

网页美化和动效

2 篇文章 0 订阅

订阅专栏

1. 效果

单选框的效果丝滑流畅
选中效果↓
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4YupL6c-1588937498437)($resource/%E9%80%89%E4%B8%AD.gif)]

取消选择的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rCO15yj-1588937498441)($resource/%E5%8F%96%E6%B6%88%E9%80%89%E4%B8%AD.gif)]

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>