Spring Tool Suite 4
[이전 글 참조]
타임리프(thymeleaf) 라디오 버튼의 초기값 설정하기
내 코드의 HTML 구조를 보면 label과 input이 있음
label은 큰 직사각형의 껍데기고, 그 안에 본 역할을 하는 input(radio)이 있음
input(radio)과 직사각형의 색 변화는 따로따로 동작한다는것.
컨트롤러에서 보낸 값은 radio에 설정이 되기 때문에 직사각형도 active 상태로 변경해줘야함.
편의를 위해 토글을 표출시켰지만 원래의 표출은 이렇다.
[과정]
1. 컨트롤러에서 addAttribute로 HTML로 변수 보냄.
2. HTML에서 타임리프로 변수를 받아서 삼항연산자로 조건에 따라 라디오 속성을 변경함.
3. 자바스크립트에서 체크된 라디오의 "value"에 해당하는 label "Id"를 찾아 class에 active 추가함.
(class에 active가 있어야 진회색으로 Label color가 변경됨)
Atest값을 보낼때 기준,
컨트롤러에서 "Atest" 라는 값을 addAttribute로 보냄.
HTML에서 조건에 의해 Atest가 참에 해당하는 input[라디오]가 체크됨.
자바스크립트에서 체크된 input[라디오]의 val을 반환함(html에서는 value="Atest")
val에 해당하는 Id를 가진 label을 찾아 class에 "active" 를 추가한다.
코드는 지난글을 기준으로 작성
setting.html
- label의 id 속성 추가
- input의 value 속성 추가
<!doctype html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
.
.
</head>
<body>
.
.
(생략)
.
.
<div data-toggle="buttons" class="btn-group" role="group">
<label class="btn mb-2 col-md-5 btn-light" id="Atest">
<input type="radio" name="mode" value="Atest" th:attr="checked=${mode.toString() == 'Atest' ? 'true' : 'false'}" autocomplete="off">Atest
</label>
<label class="btn mb-2 col-md-5 btn-light" id="Btest">
<input type="radio" name="mode" value="Btest" th:attr="checked=${mode.toString() == 'Btest' ? 'true' : 'false'}" autocomplete="off">Btest
</label>
</div>
</body>
setting.js
- var name : name이 "mode"인 컨트롤 중에 체크되어있는 value를 반환함
- var control : 반환한 value에 해당하는 컨트롤을 가져와 Class를 추가하기 위함
- addClass : jQuery로 Class 추가하기
getElementById하고, addClass 안됨. $붙여서 해결.
$(document).ready(function() {
var name = $('input[name="mode"]:checked').val();
var control = (document.getElementById(name));
$(control).addClass("active");
});
자바스크립트에서 Input라디오의 체크여부 및 체크된 값 가져오기
- 첫번째줄은 선택되어진 input의 value를 가져오는 것 (input의 속성에 value를 설정해야함)
- 두번째줄은 mode로 묶여진 라디오버튼이 현재 선택되어져있는지 확인하는 것
console.log($('input[name="mode"]:checked').val());
// Atest
console.log($('input:radio[name="mode"]').is(':checked'));
// true'개발아닌개발 > springboot' 카테고리의 다른 글
| [오류] html에서 thymeleaf sec:authorize 동작 안됨 (0) | 2023.06.22 |
|---|---|
| [오류] Maria DB 한글 insert 안됨 인코딩변경방법(UTF-8) : Incorrect string value: '\xEC\x95\x88\x85\x95....' for column ~ (0) | 2023.05.24 |
| 타임리프(thymeleaf) 라디오 버튼의 초기값 설정하기 (0) | 2022.01.12 |
| Autowired 안 될때 Bean 주입받아 해결하기(autowired Class is null 문제해결) (0) | 2022.01.10 |
| 간단하게 Height 100%로 PDF viewer 만들기(PDFObject) (0) | 2022.01.05 |
댓글