라디오버튼으로 다른내용 - 중복시

라디오버튼으로 다른내용 - 중복시

QA

라디오버튼으로 다른내용 - 중복시

본문

아래와 같은 내용에 대해 많은 고수님들의 조언으로 궁금증을 해결했는데요.

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 를 사용해보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 64
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT