HTML多选框美化和动效插件

最新推荐文章于 2023-06-27 14:10:05 发布

菡萏_花开

最新推荐文章于 2023-06-27 14:10:05 发布

阅读量1k

点赞数

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

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

版权

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

3 篇文章 0 订阅

订阅专栏

网页美化和动效

2 篇文章 0 订阅

订阅专栏

1. 效果

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

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

2. 使用说明

2.1 `createCheckbox()`

该函数用来创建多选框

createCheckbox(id, value, color_R, color_G, color_B)

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

2.2 `getCheckValue()`

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

getCheckValue(boxid)

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

2.3 `getChecked()`

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

getChecked(boxid)

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

3. 示例

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

<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="blueCheckBox"></div>
    <div id="greenCheckBox"></div>
</body>

<script type="text/javascript" src="css&js/main.js"></script>
<script type="text/javascript">
    // 创建复选框
    createCheckbox('blueCheckBox', '蓝色多选框', 68, 138, 255);
    createCheckbox('greenCheckBox', '绿色多选框', 1, 199, 106);
</script>

</html>