checkbox选中和取消，控制dom元素颜色变化

缺乏、安全感 2022-10-16 01:49 141阅读 0赞

<!DOCTYPE HTML>
    <html>
        <head>
            <title></title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
            <style>
                .bottomCheckbox {             
                    width: 545px;
                    height: 35px;             
                    padding: 7px 9px;
                    background: rgba(15, 60, 127, 0.9);
                    border-radius: 5px;
                    border-image: linear-gradient(0deg, rgba(86, 165, 255, 1), rgba(92, 250, 255, 1)) 10 10;
                }       
                .bottomCheckbox p{
                    text-align: center;
                    width: 104px;
                    display: inline-block;
                    float: left;
                    color: #FAB21A;
                }
    
            </style>
        </head>
        <body>
            <div class="bottomCheckbox">
                <p>
                    <input name="bottomType" type="checkbox" value="1" checked='checked' />风险区域
                </p>
                <p>
                    <input name="bottomType" type="checkbox" value="2" checked='checked' />危险源
                </p>
                <p>
                    <input name="bottomType" type="checkbox" value="3" checked='checked' />摄像头
                </p>
                <p>
                    <input name="bottomType" type="checkbox" value="4" checked='checked' />有毒可燃
                </p>
                <p>
                    <input name="bottomType" type="checkbox" value="5" checked='checked' />应急消防
                </p>
            </div>
        </body>
        <script type="text/javascript">
            //底部分类复选框取消和选中触发事件
            $(".bottomCheckbox  input:checkbox[name='bottomType']").click(function() {
                //选中的时候
                if ($(this).is(":checked") == true) {
    
                    $(this).parents("p").css('color', "#FAB21A");
                } else {
                    //取消选择的时候
                    $(this).parents("p").css('color', "#fff");
                }
            });
        </script>
    </html>

选中时候的颜色

![8b6e15677e4a3d5ed4d93f6aa9732bee.png][]

取消的时候的颜色

![89d304f0cdd13f13e4a652d4983385e5.png][]

每天记录一个简简单单的小功能~  
积少成多~~  
nice~~

[8b6e15677e4a3d5ed4d93f6aa9732bee.png]: /images/20221014/6baf447209624e87a41a14f39f922c20.png
[89d304f0cdd13f13e4a652d4983385e5.png]: /images/20221014/48aa69c5744c4f678ccdbb144e970e9c.png