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

最新推荐文章于 2021-09-13 15:42:50 发布

祈澈菇凉

最新推荐文章于 2021-09-13 15:42:50 发布

阅读量339

点赞数

文章标签： css checkbox js bootstrap html

本文链接：https://blog.csdn.net/qq_36538012/article/details/117286338

版权

<!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>

选中时候的颜色