on/off 스위치 css 유지하는법

on/off 스위치 css 유지하는법

QA

on/off 스위치 css 유지하는법

본문

안녕하세요 db값에 따라 on/off를 나타내고싶습니다

https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button

참고해서



<!-- custom style -->
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 20px;
        top : 100%;
        margin-left: -27px;
        margin-top : 25px;
    }

    .switch input {display:none;}

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #CCC;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: var(--BASE_COLOR);
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(35px);
        -ms-transform: translateX(35px);
        transform: translateX(35px);
    }

    /*------ ADDED CSS ---------*/
    .check_on
    {
        display: none;
    }

    .check_on, .check_off
    {
        color: white;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 10px;
        font-family: Verdana, sans-serif;
    }

    input:checked+ .slider .check_on
    {display: block;}

    input:checked+ .slider .check_off
    {display: none;}

    .slider.round {
        border-radius: 32px;
    }

    .slider.round:before {
        border-radius: 50%;}
</style>

css부분이고,


<? php

$temp = $row5[' - ']; //db에서 on/off를 가져옴
?>

    <div class="container" display: table-cel; vertical>
        <div class="item">
            <a href="#">
                <div style="float:right;">
                    <form name = "p_alert" id="p_alert" method="POST" onclick="javascript:checkForm(document.p_alert);">
                        <label class="switch">
                            <?php if($temp=="Y"){?> // DB에 저장된게 Y이면,
                                <input type="checkbox" id="togBtn" name = "togBtn" value = "true">//DB내용을 수정
                                <div class="slider round">
                                    <span class="check_on" type="push">ON</span> //스위치 ON
                                </div>
                            <?}else if($temp=="N"){?> //DB에 저장된게 N이면,
                                <input type="checkbox" id="togBtn" name = "togBtn" value = "false">//DB내용을 수정
                                <div class="slider round">
                                    <span class="check_off" type="push">OFF</span> // 스위치 OFF
                                </div>
                            <?}?>
                    </form>
                </div>
                </label>
        </div>
        </a>

이런식으로 구현했습니다

 

스위치를 클릭했을때 DB갱신은 되는데 DB값에 따라 스위치가 ON/OFF 상태가 유지가 되지 않네요 ㅜㅜ

 

혹시 참고할만한 홈페이지나 내용 알고 계신분 알려주시면 감사하겠습니다..!

이 질문에 댓글 쓰기 :

답변 2

jquery 로 클릭 이벤트를 가지고 해당 css를 변경하셔야 합니다.

 

$(document).ready(function(){

$(".check_off").click(function(){

$(this).removeClass("check_off");

$(this).addClass("check_on");

});

});

 

이런식으로요..

 

원하시는 내용이 맞을지 모르겠네요.

 

도움이 되었으면 합니다~

$temp $row5[' - '];

에서 $temp 가 잘 나오는 지 보셔야 할것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 24
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT