2. 게시판 여분필드와 자바스크립트 : radio

· 2023-03-07 (화) 09:38:45 · 4151 · 6

 

먼저 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]

 

31845957_1678149475.9101.jpg

 

위와 같이 훌륭(?)하게 만들어졌습니다.

|

댓글 6개

여분필드사용 시 좋은 팁 감사 합니다. 잘 활용 하겠습니다.
2023-03-07 (화) 10:49:00
@들레아빠 그냥저냥 올려본 것입니다.ㅋ
2023-03-08 (수) 07:57:45
그동안 역따옴표 안써봤는데 써봐야 겠습니다. ^^
2023-03-08 (수) 21:22:08
@민트다이어리 아주 편합니다. 모던 js 에서 벡틱(역따옴표)와 파트너인 ${} 도 쓸만 하구요.
역시 굿굿^^
2023-03-09 (목) 17:00:13
@푸른산타 알고나면 쉽습니다.ㅋ
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
23-03-16 조회 3,641
23-03-16 조회 4,324
23-03-11 조회 4,524
23-03-09 조회 3,933
23-03-08 조회 4,350
23-03-07 조회 4,152
23-03-06 조회 4,789
23-03-05 조회 3,919
23-03-03 조회 5,635
23-03-02 조회 4,823
23-03-02 조회 3,782
23-03-01 조회 3,481
23-02-20 조회 3,832
23-02-16 조회 4,431
23-02-16 조회 3,753
23-02-11 조회 4,062
23-02-10 조회 4,566
23-02-08 조회 3,954
23-02-06 조회 4,340
23-02-05 조회 4,374
23-02-02 조회 5,626
23-02-02 조회 5,161
23-02-02 조회 3,476
23-02-02 조회 3,923
23-02-02 조회 4,251
23-02-01 조회 4,329
23-01-30 조회 4,044
23-01-27 조회 4,335
23-01-27 조회 5,495
23-01-25 조회 4,732