자바스크립트 - 라디오버튼 에 맞는 테이블 출력.
아래와 같이 구조가 짜여있습니다.
의료를 누르면 의료에 맞는 테이블이
전자기기를 누르면 전자기기에 맞는 테이블이
소형전자를 누르면 소형전자에 맞는 테이블이 출력되도록요.
<input type='radio' value='a1'>의료
<input type='radio' value='a2'>전자기기
<input type='radio' value='a3'>소형전자
<div id='a1'>
<table>
<td>의료에관련된 테이블</td>
</table>
</div>
<div id='a2'>
<table>
<td>전자기기에 관련된 테이블</td>
</table>
</div>
<div id='a3'>
<table>
<td>소형전자에 관련된 테이블</td>
</table>
</div>
의료를 누르면 의료에 맞는 테이블이
전자기기를 누르면 전자기기에 맞는 테이블이
소형전자를 누르면 소형전자에 맞는 테이블이 출력되도록요.
<input type='radio' value='a1'>의료
<input type='radio' value='a2'>전자기기
<input type='radio' value='a3'>소형전자
<div id='a1'>
<table>
<td>의료에관련된 테이블</td>
</table>
</div>
<div id='a2'>
<table>
<td>전자기기에 관련된 테이블</td>
</table>
</div>
<div id='a3'>
<table>
<td>소형전자에 관련된 테이블</td>
</table>
</div>
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 3개
각 테이블의 내용을 모두 호출하여 뿌려주신뒤에 . 라디오 버튼 클릭으로
show , hide 하시면 될거 같습니다.
최초 display는 a1만 놔두시고 나머지는 display:none 설정 해두시고요.
자바스크립트에서
$(document).ready(function () {
// 여기서 부터
$("input[name=a1]:radio").click(function() {
$('#a1').css({
"display":""
});
$('#a2,#a3').css({
"display":"none"
});
}); // 여기까지 반복
//a2~a3 반복
});