[jsp] 토글 버튼 구현

---

jsp 페이지를 구현하는 중 토글 버튼을 구현해야 사용이 가능한 기능이 있어서

css를 이용해서 토글버튼을 구현하고 상태 값이 변할 때 해당 토글 버튼의 상태가 on인지 off인지

알 수 있도록 script 파일을 통해 구현했습니다

 

css style

<link href="/css/mot.css" rel="stylesheet" type="text/css" />
<style>

    .toggleSwitch {
             width: 5rem;
             margin: 2rem;
             height: 2rem;
             display: block;
             position: relative;
             border-radius: 2rem;
             background-color: #fff;
             box-shadow: 0 0 1rem 3px rgba(0 0 0 / 15%);
             cursor: pointer;
    }

    .toggleSwitch .toggleButton {
            width: 2rem;
            height: 1.6rem;
            position: absolute;
            top: 50%;
            left: .2em;
            transform: translateY(-50%);
            border-radius: 50%;
            background: #f03d3d;
    }

	/* 체크박스가 체크되면 변경 이벤트 */
    #toggle:checked~ .toggleSwitch {
            background: #f03d3d;
    }

	/* 체크박스가 체크되면 토글을 왼쪽으로부터 2.3rem까지 오른쪽으로 이동 */
    #toggle:checked~ .toggleSwitch .toggleButton {
            left: calc(100% - 2.3rem);
            background: #fff;
    }

    .toggleSwitch, .toggleButton {
            transition: all 0.2s ease-in;
    }
    
</style>

 

html

<td align="center"><input type="checkbox" id="toggle" checked="checked" hidden>
	<label for="toggle" class="toggleSwitch">
    	<span class="toggleButton"></span>
    </label>
</td>

css에서 정의한 토글 버튼을 html에 입력하고 type은 checkbox

id는 css에서 #toggle 태그에 맞게 toggle로 맞춰줍니다

 

실제 토글 버튼은 체크박스를 통해 구현했기 때문에 체크박스에 체크가 되느냐

안되느냐를 통해 토글버튼의 움직임을 만들었고 그렇기 때문에 토글 버튼의 위쪽에

체크박스가 보이게 되는데 이 부분을 hidden을 통해 가려주면 체크박스는 보이지 않고

오로지 토글 버튼만 화면에 보이게 됩니다

 

script

<script>
$('input[id="toggle"]').change(function(){
        var value = $(this).val();
        var checked = $(this).prop('checked');
        var toggle_state;
        if(checked){
                document.getElementById('toggle_state').innerHTML="on";
                toggle_state = "on";
        }else{
                document.getElementById('toggle_state').innerHTML="off";
                toggle_state = "off";
        }
});
</script>

toggle 버튼을 눌를때 마다 해당 script가 실행이 되고 checked 여부를 파악해서

toggle_state라는 text에 상태를 출력하도록 하였습니다.

 

만약 html에서 토글의 상태를 불러와야 하는 경우에는 토글 상태가 변할 때마다

토글 상태를 DB에 저장하고 토글 버튼이 있는 페이지에 들어올 때 DB의 값을 읽어서

토글 상태를 on인지 off인지 만들어 주어야 합니다

<td class="text_align_c" id='toggle_state'>
	<c:if test="${sen.lastCv==1}">on</c:if>
	<c:if test="${sen.lastCv==0}">off</c:if>
</td>

DB를 통해 읽어온 값이 sen.lastCV라고 한다면 토글의 상태를 출력하는 toggle_state에서는

c:if를 통해 해당 값을 판단하여 on/off를 출력합니다

<c:if test="${sen.lastCv==0}">
        <td align="center"><input type="checkbox" id="toggle" hidden><label for="toggle" class="toggleSwitch"><span class="toggleButton"></span></label></td>
</c:if>

<c:if test="${sen.lastCv==1}">
        <td align="center"><input type="checkbox" id="toggle" checked="checked" hidden><label for="toggle" class="toggleSwitch"><span class="toggleButton"></span></label></td>
</c:if>

그리고 실제적으로 토글이 오른쪽인지 왼쪽 인지도 초기 세팅을 해주어야 하는데

checked 옵션을 통해서 토글의 방향을 설정해 줄 수 있습니다

만약 lastCV가 0이면 checked가 설정되지 않기 때문에 왼쪽 방향,

lastCV가 1이면 checked가 설정되어 있기 때문에 오른쪽 방향으로 출력됩니다