radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기

radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기

 

웹을 더욱 동적으로 만드는 방법이 뭘까요? 누를때마다 뭔가 바로 바로 동작하는 힘, 그것이 바로 웹의 강력한 힘이 아닐까 싶네요. 엑셀로 많은 좋은 기능등을 만들어서 서로 공유해서 사용하는데 한계를 느낄 수 있습니다.

웹은 공공재라서 서로 더 발전시키고 더 키워나가는 재미가 솔솔하잖아요.

제이쿼리의 강력한 기능을 하나 소개합니다.

라디오버튼을 누를때 동작하는 웹? 상상해도 즐겁네요.

 

원리는 아래의 코드가 핵심입니다. 제이쿼리의 고유코드겠지요.

<script type="text/javascript">
$(document).ready(function() 
{ 
    $("input:radio[name=separate_date]").click(function() 
    { 
        process_list(); 
    }) 
});

출고일과 접수일을 클릭하면 날짜에 맞는 검색을 구현하는 프로시져인데요, 위와 같이 선언을 해주고,

	    if($separate_date=="1") {
			 ?>
			&nbsp; 출고일 <input type="radio" checked name="separate_date" value="1">
			&nbsp; 접수일 <input type="radio" name="separate_date" value="2">
			<?php
             		}    ?>	 
			 <?php
	    if($separate_date=="2") {
			 ?>
			&nbsp; 출고일 <input type="radio"  name="separate_date" value="1">
			&nbsp; 접수일 <input type="radio" checked name="separate_date" value="2">
			<?php
             		}    ?>	 

자바스크립트 함수도 이렇게 선언해 주면 됩니다.

function process_list(){   // 접수일 출고일 라디오버튼 클릭시

 document.getElementById('board_form').submit();  // form의 검색버튼 누른 효과  

} 

이렇게 만든다면 실행 후 원하는 결과를 얻을 거예요~

 

해피한 주말 보내세요~