html 选择列表

最新推荐文章于 2024-09-19 16:29:39 发布

小溪彼岸

最新推荐文章于 2024-09-19 16:29:39 发布

阅读量2.5k

点赞数

分类专栏： # HTML 文章标签： html 列表多选

本文链接：https://blog.csdn.net/zww1984774346/article/details/53138962

版权

本文介绍了如何使用HTML创建带有勾选按钮的多选列表。通过点击事件改变元素的className，实现列表项的选择与切换功能。提供了具体的代码示例。

摘要由CSDN通过智能技术生成

带有勾选按钮的多选列表

<span class="cbox" onclick="this.className=/checked/ig.test(this.className)?this.className.replace('checked',''):(this.className+' checked')"></span>

当点击时替换className达到切换的母的。

具体代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        .contain{
            width: 280px;
            border: 1px solid lightgray;