2. 게시판 여분필드와 자바스크립트 : radio
먼저 1편 https://sir.kr/g5_tip/20120 을 꼭 읽으시기 바랍니다.
여분필드를 라디오 버튼으로 사용할 때는 보통 아래의 코드를 사용합니다.
[code]
<input type="radio" name="wr_2" value="하나"<?php echo ($write['wr_2'] === "하나") ? " checked" : ""; ?>> 하나
<input type="radio" name="wr_2" value="둘"<?php echo ($write['wr_2'] === "둘") ? " checked" : ""; ?>> 둘
<input type="radio" name="wr_2" value="셋"<?php echo ($write['wr_2'] === "셋") ? " checked" : ""; ?>> 셋
[/code]
----------
이걸 자바스크립트로 표현하면 아래처럼 됩니다. 저는 for of 반복문 처리하였습니다.
DOMContentLoaded 로 상단에서 표현하는 방법은 1편 링크를 보고 참고하세요.
[code]
<input type="radio" name="wr_2" value="하나"> 하나
<input type="radio" name="wr_2" value="둘"> 둘
<input type="radio" name="wr_2" value="셋"> 셋
.
.
.
<script>
for (i of document.querySelectorAll("input[name='wr_2']")) i.checked = i.value === "<?php echo $write['wr_2']; ?>";
</script>
[/code]
----------
write.skin.php 를 건드리지 않고 pc basic 스킨의 write.tail.skin.php 에서 표현하려면 아래처럼요.
태그소스가 길고 칸띄우기까지 들어갔으므로 모던 js 인 역따옴표 변수(여기서는 wrRadio_2)를 하나 만들어서 태그를 담아두는 것이 편합니다.
역따옴표 변수를 쓰면 변수안에 외따옴표나 쌍따옴표도 맘대로 쓸 수 있기 때문에 따옴표 문제로 코드가 실행이 안 되는 걸 경험해 본 분이라면 아마도 만세를 부를 것입니다.
저도 비교적 최근부터 사용하기 시작했구요.
[code]
<script>
wrRadio_2 = `
<input type="radio" name="wr_2" value="하나"> 하나
<input type="radio" name="wr_2" value="둘"> 둘
<input type="radio" name="wr_2" value="셋"> 셋
`;
document.querySelector("#bo_w .bo_w_tit").insertAdjacentHTML("afterend", wrRadio_2);
for (i of document.querySelectorAll("input[name='wr_2']")) i.checked = i.value === "<?php echo $write['wr_2']; ?>";
</script>
[/code]

위와 같이 훌륭(?)하게 만들어졌습니다.
댓글 6개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 1794 |
|
4년 전 | 5890 | |
| 1793 | 4년 전 | 2861 | ||
| 1792 |
|
4년 전 | 5292 | |
| 1791 |
iiliiiliii
|
4년 전 | 6016 | |
| 1790 |
iiliiiliii
|
4년 전 | 3885 | |
| 1789 |
iiliiiliii
|
4년 전 | 6217 | |
| 1788 |
|
4년 전 | 3315 | |
| 1787 | 4년 전 | 3791 | ||
| 1786 | 4년 전 | 5371 | ||
| 1785 | 4년 전 | 3999 | ||
| 1784 | 4년 전 | 3187 | ||
| 1783 | 4년 전 | 6368 | ||
| 1782 |
welcome
|
4년 전 | 5196 | |
| 1781 | 4년 전 | 3469 | ||
| 1780 | 4년 전 | 12229 | ||
| 1779 |
welcome
|
4년 전 | 4872 | |
| 1778 |
|
4년 전 | 3633 | |
| 1777 | 4년 전 | 3821 | ||
| 1776 | 4년 전 | 5449 | ||
| 1775 |
그누x쵸딩
|
4년 전 | 3136 | |
| 1774 |
슈퍼스타맨
|
4년 전 | 4385 | |
| 1773 | 4년 전 | 3996 | ||
| 1772 | 4년 전 | 4362 | ||
| 1771 | 4년 전 | 6590 | ||
| 1770 | 4년 전 | 2940 | ||
| 1769 | 4년 전 | 4925 | ||
| 1768 | 4년 전 | 5610 | ||
| 1767 | 4년 전 | 3716 | ||
| 1766 | 4년 전 | 2809 | ||
| 1765 | 4년 전 | 3046 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기