简单高效jquery 单选多选效果实现，不含数据交互

最新推荐文章于 2023-07-06 19:39:03 发布

十月在冬天

最新推荐文章于 2023-07-06 19:39:03 发布

阅读量300

点赞数

分类专栏： JavaScript jQuery

本文链接：https://blog.csdn.net/Payne_liu/article/details/108239179

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div单选</title>
    <style>
        .box{
            overflow: hidden;
            display: flex;
        }
        .container,.qh-btn{
            width: 50px;
            height: 50px;
            background-color: #E6E6E6;
            border:1px solid #cccccc;
            text-align: center;
            line-height: 50px;
            margin-left: 20px;
            border-radius: 5px;
        }
        .active{
           background-color: #ffff7f;
        }
        
        .redBorder{
            background-color: #ffaaff;
            color: #FFF;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>单选</div>
<div class="box">
    <div class="qh-btn" data-id="1">单选</div>
    <div class="qh-btn" data-id="2">单选</div>
    <div class="qh-btn" data-id="3">单选</div>
</div>
<div>多选</div>
<div class="box">
    <div class="container">多选</div>
    <div class="container">多选</div>
    <div class="container">多选</div>
</div>
<script>
    //单选
    $(".qh-btn").on("click",this,function () {   
        if($(this).hasClass("active")){//如果当前类选中
            $(this).removeClass("active");//那么就取消选中状态
        }
        else{//如果没选中
            $(".qh-btn").each(function () {//遍历
                $(this).removeClass("active");//取消其他选中状态
            })
            $(this).addClass("active");//当前的增加
        }
    })
    //多选
    $(".container").on("click",this,function () {
        $(this).toggleClass("redBorder");
    })
</script>
</html>

废话也不多就直接上代码，很简单，大家可以学习这个思路，ctrl+c和ctrl+v之前希望大家能思考一下，不要只做代码搬运工。

十月在冬天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单高效jquery 单选多选效果实现，不含数据交互

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div单选</title> <style> .box{ overflow: hidden; display: flex; } .container,.qh-btn{.
复制链接

扫一扫