[Node.js][ejs] ejs로 HTML checkbox check 여부 설정하기

ejs에서 받은 데이터를 이용하여 checkbox 체크 여부를 설정하려 했다

원래 html check 박스 사용법은

<input type="checkbox" checked>체크
<input type="checkbox" checked>체크안됨

위와 같이 사용하면 된다.

하지만 checked위치에 ejs구문을 넣으니 %> 가 input의 닫는 태그로 인식되는 문제가 있었다

" "를 붙여봐도 여전히 인식이 되지 않아서 checked=checked와 같은 방식으로 ejs 데이터를 넣어주어야 했다

찾아보니 checked=checked, checked=1. checked=true와 같은 속성을 주어도 동작한다는데

난 checked에 unchcked, 0, false를 줘도 체크 안되는게 먹히지 않았다ㅜㅜ

결국 value를 ejs에서 받아온 데이터에 따라 check여부로 주고

value에 따라 checked속성을 변경하는 jQuery를 사용하여 해결했다!

notice.ejs


...
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>

<body>

...

<input type="checkbox" id="pinned" name="pinned" value="<%= data.result.pinned %>">상단고정
<input type="checkbox" id="status" name="status" value="<%= data.result.status %>">공개여부

    <script>
        if($("#pinned").val()==1){
            $("#pinned").prop("checked", 1);
            $("#pinned").prop("value", 1);
        }
        else{
            $("#pinneds").prop("checked", 0);
            $("#pinned").prop("value", 1);
        }
        if($("#status").val()==1){
            $("#status").prop("checked", 1);
            $("#pinned").prop("value", 1);
        }
        else{
            $("#status").prop("checked", 0);
            $("#pinned").prop("value", 1);
        }
    </script>
    
</body>

원래는 prop("checked", 값)에서 값 위치에 바로 ejs데이터인 체크여부를 나타내는 val()을 넣으려고 했지만 그것조차 동작하지 않아서

val()에 따라 일일이 1, 0으로 설정해주었다

이제 체크 안되는 것도 잘 동작한다 ... ^^

저작자표시

'🔙 Backend > 🟢 Node.js' 카테고리의 다른 글

[Node.js] Cookie 사용하기 🍪 (0)	2021.06.01
[Node.js][Express] alert 창 띄우고, 페이지 이동하기 (0)	2021.06.01
[Node.js][express] html에서 ejs 사용시 html태그로 인식 되는 문제 (0)	2021.06.01
[Node.js][express] ejs로 서버에서 받은 JSON 데이터 보여주기 (0)	2021.06.01
[Node.js]nodejs로 웹서버 만들기 (0)	2020.08.28

'🔙 Backend > 🟢 Node.js' 카테고리의 다른 글

티스토리툴바