label 위치 질문입니다.

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

체크 박스 - 멀티

작성

938

안녕하세요!

이 코드에서 라벨의 위치만 바꿔서

이렇게하면 제 예상으론

label이 위로가서 원래

ㅁ 판매오픈 , ㅁ 서울 ( ㅁ은 체크박스 입니다)

이렇게 나오는게

판매오픈 ㅁ, 서울 ㅁ 이렇게 나온다고 예상했는데

판매오픈같은 경우에는 옮겨도 오류는 안나지만 그대로 ㅁ판매오픈 이런식으로 나오고

서울 부산 제주 밑에 코드의 경우에는 아예 오류가 나버리던데

왜그런건가요,..?

답변 2

저처럼 나중에 보실 분들을 위해서 남깁니다.

질문자님 처럼

th:for="${#ids.prev('regions')}"

를 아래와 같이 수정하면 정상 작동합니다.

th:for="${#ids.next('regions')}"

Ids 클래스의 prev 메서드가 앞서 생성한 th:field="*{regions}"를 다시 가져오는 기능을 하는 듯 한데<label>태그가 <input>태그보다 앞에 있으면 가져올 값이 없어서 나는 오류인 듯 합니다.

하지만 여전히 체크박스가 앞에 있어서

<div th:each="region : ${regions}" class="form-check form-check-inline">

class="form-check form-check-inline" 이 부분을 지웠더니 체크박스가 뒤로 가는 것을 확인했습니다.

캬!! 대박이네요

지식공유자

안녕하세요. it09kim님

해당 부분은 HTML의 약속입니다. LABEL의 위치나 이런 부분도 다 약속이 되어 있습니다.

관련해서 위치를 바꾸고 싶으면 HTML, CSS를 학습하셔야 합니다.

(제가 백엔드 개발자여서 저도 어떻게 해야할지 모르겠네요ㅠㅠ)

혹시 아시는 분있으면 답변 부탁드립니다.

감사합니다.

질문자

<div class="classCheckBox">
<input type="checkbox" id="checkboxId24" value="1" name="checkboxName[]" />
<label for="checkboxId24">1 </label>
</div>

Jquery를 사용해서 이런식으로 바꾸는 방법이있다고합니다..ㅜㅜ

$('.classCheckBox label').each(function() {
$(this).insertBefore( $(this).prev('input') );
});
// Reference: stackoverflow

인프런 커뮤니티 질문&답변