checkbox選中和取消，控制dom元素顏色變化_其它

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

選中時候的顏色

checkbox選中和取消，控制dom元素顏色變化

取消的時候的顏色

checkbox選中和取消，控制dom元素顏色變化

每天記錄一個簡簡單單的小功能~
積少成多~~
nice~~

checkbox選中和取消，控制dom元素顏色變化

相關推薦