본문 바로가기

JavaScript & jQuery

RadioButton선택시 div 다르게 나오기

Q. 세 개의 RadioButton이 있다. 원하는 노래제목을 클릭하면, 해당 div의 내용(노래가사)이 출력된다. 
 ↓  ↓ 원하는 출력결과  ↓ ↓



1. RadioButton에는 선택값을 구분하기 위해서, 각각 고유한 id를 지정한다.
2. onClick를 사용하여 자바스크립트의 contentsView를 호출한다. 

<asp:RadioButton ID="card" runat="server" GroupName="orderGroup" Checked="true" onclick="javascript:contentsView(card);"/> 여전히 아름다운지
            <asp:RadioButton ID="cardDiv" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(cardDiv);"/> 사랑한다는 흔한 말
            <asp:RadioButton ID="bank" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(bank);"/> 내가 너의 곁에 잠시 살았다는걸

3. 해당 RadioButton에 따라 출력 될 div를 코딩한다. div에도 마찬가지로 각각 고유한 id를 지정한다.
세 개의 div중 처음 페이지가 load 됐을 때 보여줄 div만 display를 'block'로 설정하고 
'block'으로 지정한 div를 제외한 나머지 div는 display가 none으로 설정 돼있어야 한다.

<div id="Song1">
                <table>
                    <tr>
                        <th>김연우♬  여전히 아름다운지</th>
                    </tr>
                    <tr>
                        <td>
                            첨엔 혼자라는게 편했지 자유로운 선택과 시간에 너의 기억을 지운 듯 했어<br />
                            정말 난 그런줄로 믿었어 하지만 말야 이른 아침 혼자 눈을 뜰때 내 곁에<br />
                            니가 없다는 사실을 알게 될 때면 나도 모를 눈물이 흘러~~~
                        </td>
                    </tr>
                </table>
            </div>

<div id="Song2">
                <table>
                    <tr>
                        <th>김연우♬ 사랑한다는 흔한 말</th>
                    </tr>
                    <tr>
                        <td>
                        끝이란 헤어짐이 내겐 낯설어 아직까지 난 믿을수 없는데 마치 거짓말인 것처럼<br />
                        힘들단 내색조차 너는 없어서 아무것도 난 몰랐어 한동안 그저 좋은 줄만 알았어<br />
                        하루만 나 지우면 되니 잠시만 나 네 눈 앞에서 멀어지면 토라진 맘 풀릴 수 있니<br />
                        </td>
                    </tr>
                </table>
            </div>

            <div id="Song3">
                <table>
                    <tr>
                        <th>김연우♬ 내가 너의 곁에 잠시 살았다는걸 </th>
                    </tr>
                    <tr>
                        <td>
                            지운줄 알았어 너의 기억들을 친구들 함께 모여 술에 취한 밤 <br />
                            네 생각에 난 힘들곤 해 그런채 살았어 늘 혼자였잖아 한때는 널 구원이라<br />
                             믿었었어 멀어지기 전엔 <br />
                        </td>
                    </tr>
                </table>
            </div>

4. 자바스크립트 함수(호출 할 때 넘어오는 값으로 구분하여 display를 설정한다.)
함수에서 jquery를 사용하였기 때문에, 함수를 사용하기 전에  jquery를 사용하겠다고 꼭 먼저 선언한다.

 <script language="javascript" type="text/javascript">
         function contentsView(objVlaue) {
             if (objVlaue.value == 'bank') {
                 $('#cardPnl').css('display', 'none');
                 $('#cardDivPnl').css('display', 'none'); //display 'none'은= div가 보이지않는!
                 $('#bankPnl').css('display', 'block'); // display 'block'은 = div가 보이는!
                 return false;
             }
             if (objVlaue.value == 'card') {
                 $('#cardDivPnl').css('display', 'none');
                 $('#bankPnl').css('display', 'none');
                 $('#cardPnl').css('display', 'block');
                 return false;
             }
             if (objVlaue.value == 'cardDiv') {
                 $('#cardPnl').css('display', 'none');
                 $('#bankPnl').css('display', 'none');
                 $('#cardDivPnl').css('display', 'block');
                 return false;
             }
         }
     </script>