라디오버튼으로 다른내용 - 중복시
본문
아래와 같은 내용에 대해 많은 고수님들의 조언으로 궁금증을 해결했는데요.
https://sir.kr/qa/215216?vpage=1#answer_215223
(요약하자면, 라디오 버튼 선택시 하단부에 다른내용이 나오도록 처리하는 부분입니다.)
그런데. 또 하나 궁금한게 생겼는데요.
라디오 버튼에 3개라고 가정하고
1번과 3번은 같은 내용이 보여지고 2번만 다른내용이 보여질 경우
위 팁에서는 보여질 내용을 감싼 div의 id값으로 구분하는데
숫자로 제어하는 스크립트를 어떻게 해야할지 고민입니다.
고수님들의 가름침 부탁드립니다.
답변 2
아래질문에 있는 내용의 중복인가요?
중복이라도 코드를 올려주셔야 고쳐드리기라도 할텐데요 ㅋ
해당 코드입니다. ^^
<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>
<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>
뒷부분에 getElementById 부분에 해당 인덱스를 조정해주면 되겠죠?
감사합니다.
아까 드린 링크처럼 data attribute 를 사용해보세요.
넵 ^^
답변을 작성하시기 전에 로그인 해주세요.
