라디오버튼으로 다른내용 - 중복시 채택완료
망이망소이
7년 전
조회 3,298
아래와 같은 내용에 대해 많은 고수님들의 조언으로 궁금증을 해결했는데요.
https://sir.kr/qa/215216?vpage=1#answer_215223" href="https://sir.kr/qa/215216?vpage=1#answer_215223">https://sir.kr/qa/215216?vpage=1#answer_215223
(요약하자면, 라디오 버튼 선택시 하단부에 다른내용이 나오도록 처리하는 부분입니다.)
그런데. 또 하나 궁금한게 생겼는데요.
라디오 버튼에 3개라고 가정하고
1번과 3번은 같은 내용이 보여지고 2번만 다른내용이 보여질 경우
위 팁에서는 보여질 내용을 감싼 div의 id값으로 구분하는데
숫자로 제어하는 스크립트를 어떻게 해야할지 고민입니다.
고수님들의 가름침 부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 3개
�
망이망소이
7년 전
�
나시
7년 전
[code]
<SCRIPT LANGUAGE="JavaScript">
function checkBox() {
var check_Box = document.getElementsByName("ckbox"); //체크박스 name
for (j = 0; j < check_Box.length; j++) {
document.getElementById([j+1]).style.display = "none";
}
if check_Box[0].checked == true { document.getElementById(1).style.display = "block"; }
if check_Box[1].checked == true { document.getElementById(2).style.display = "block"; }
if check_Box[2].checked == true { document.getElementById(1).style.display = "block"; }
}
</script>
<div id="1">항목01.03번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
[/code]
뒷부분에 getElementById 부분에 해당 인덱스를 조정해주면 되겠죠?
<SCRIPT LANGUAGE="JavaScript">
function checkBox() {
var check_Box = document.getElementsByName("ckbox"); //체크박스 name
for (j = 0; j < check_Box.length; j++) {
document.getElementById([j+1]).style.display = "none";
}
if check_Box[0].checked == true { document.getElementById(1).style.display = "block"; }
if check_Box[1].checked == true { document.getElementById(2).style.display = "block"; }
if check_Box[2].checked == true { document.getElementById(1).style.display = "block"; }
}
</script>
<div id="1">항목01.03번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
[/code]
뒷부분에 getElementById 부분에 해당 인덱스를 조정해주면 되겠죠?
�
망이망소이
7년 전
감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
[code]
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkBox() {
var check_Box = document.getElementsByName("ckbox"); //체크박스 name
for (j = 0; j < check_Box.length; j++) {
var disign = document.getElementById([j+1]); // 보여질내용
if(check_Box[j].checked == true ){
disign.style.display = "block";
}else{
check_Box[j].checked = false;
disign.style.display = "none";
}
}
}
// -->
</script>
<!--라디오버튼-->
<label for="ckbox1">항목01</label>
<input type="radio" name="ckbox" id="ckbox1" value="" onClick="checkBox()"><br>
<label for="ckbox2">항목02 </label>
<input type="radio" name="ckbox" id="ckbox2" value="" onClick="checkBox()"><br>
<label for="ckbox3">항목03</label>
<input type="radio" name="ckbox" id="ckbox3" value=""onClick="checkBox()"><br>
<!--보여질내용-->
<div id="1">항목01번을선택하였습니다</div>
<div id="2">항목02번을선택하였습니다</div>
<div id="3">항목03번을선택하였습니다</div>
[/code]