관련지식
javascript, jquery

Angular, React, Vue 등 많은 자바스크립트 프레임워크가 인기를 끌고 있지만 JQuery는 여전히 현역으로 사용중인 라이브러리 입니다. 특히 많은 퍼블리셔와 스크립터가 애용하고 있죠.

그런데 개발자는 라디오 버튼을 스크립트로 제어해야 하는 경우가 많습니다. 따라서 이번에는 JQuery에서 radio 버튼의 체크 속성을 컨트롤하는 방법 세가지를 보여드리겠습니다.

방법1

가장 많이 사용하는 방법입니다. JQuery selector 에 값을 지정하여 체크하려는 요소만 가져와서 checked 속성을 넣는 방법입니다. selector 는 ID를 사용하는 형태로 바꿔서 쓸수도 있겠죠.

  1. $(":radio[name='r1'][value='N']").attr('checked', true);

그런데 가장 기본적인 이 방법은 고정값이 아닌 변수를 사용할때 매우 안좋은 모양이 됩니다. 만약 radioVal 변수의 값과 일치하는 라디오 버튼을 체크하려고 한다면 아래와 같이 해야 합니다. 매우 지저분하죠?

  1. $(":radio[name='r1'][value='" + radioVal + "']").attr('checked', true);

방법2

1번 방법을 늘려 쓸수도 있습니다. 이 방법 역시 많이 쓰는 방법입니다.

  1. $(":radio[name='r2']").each(function() {
  2.   var $this = $(this);
  3.   if($this.val() == 'N')
  4.     $this.attr('checked', true);
  5. });

값을 변수로 대체해도 형태가 크게 바뀌지 않습니다.

  1. $(":radio[name='r2']").each(function() {
  2.   var $this = $(this);
  3.   if($this.val() == radioVal)
  4.     $this.attr('checked', true);
  5. });

그런데 이 방법은 라디오버튼을 체크하기 위해 너무 많은 코딩이 필요하다는 단점이 있습니다.

방법3

제가 가장 추천하는 방법입니다. 먼저 공통으로 실행되는 스크립트 영역에 아래의 소스를 추가합니다. 반드시 JQuery가 로딩된 후에 실행되어야 합니다.

  1. $.fn.radioSelect = function(val) {
  2.   this.each(function() {
  3.     var $this = $(this);
  4.     if($this.val() == val)
  5.       $this.attr('checked', true);
  6.   });
  7.   return this;
  8. };

그리고 아래와 같이 호출하면 라디오 버튼이 선택됩니다.

  1. $(":radio[name='r3']").radioSelect('N');  //파라미터에 해당하는 값을 가진 라디오버튼이 선택됨

변수로 바꿔봐도 매우 깔끔합니다.

  1. $(":radio[name='r3']").radioSelect(radioVal);

아래와 같이 메소드 체이닝도 가능합니다.

  1. $(":radio[name='r3']").radioSelect(radioVal).parents(".form-group");

최종 샘플

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  7. <style>
  8. .group { border:1px solid gray; }
  9. </style>
  10. </head>
  11. <body>
  12.   <div class="group">
  13.     <pre>
  14. $(":radio[name='r1'][value='N']").attr('checked', true);
  15.     </pre>
  16.     <input type="radio" name="r1" value="Y"/> 예
  17.     <input type="radio" name="r1" value="N"/> 아니오    
  18.   </div>
  20.   <div class="group">
  21.     <pre>
  22. $(":radio[name='r2']").each(function() {
  23.   var $this = $(this);
  24.   if($this.val() == 'N')
  25.     $this.attr('checked', true);
  26. });        
  27.     </pre>
  28.     <input type="radio" name="r2" value="Y"/> 예
  29.     <input type="radio" name="r2" value="N"/> 아니오    
  30.   </div>
  32.   <div class="group">
  33.     <pre>
  34. $(":radio[name='r3']").radioSelect('N');
  35.     </pre>
  36.     <input type="radio" name="r3" value="Y"/> 예
  37.     <input type="radio" name="r3" value="N"/> 아니오    
  38.   </div>
  40. <script>
  41. var radioVal = 'N';
  42. $(":radio[name='r1'][value='" + radioVal + "']").attr('checked', true);
  44. $(":radio[name='r2']").each(function() {
  45.   var $this = $(this);
  46.   if($this.val() == radioVal)
  47.     $this.attr('checked', true);
  48. });
  50. $.fn.radioSelect = function(val) {
  51.   this.each(function() {
  52.     var $this = $(this);
  53.     if($this.val() == val)
  54.       $this.attr('checked', true);
  55.   });
  56.   return this;
  57. };
  59. $(":radio[name='r3']").radioSelect(radioVal);  //파라미터에 해당하는 값을 가진 라디오버튼이 선택됨
  63. </script>
  64. </body>
  65. </html>


저작자표시 비영리 변경금지

'jquery' 카테고리의 다른 글

[jquery] 입력필드 포커스 자동 이동 구현  (0) 2020.02.10
[jquery] checkbox 에 checked 속성을 넣는 가장 간단한 방법  (0) 2019.09.06
[jquery] 마우스로 범위 지정하여 HTML Element 선택하기  (3) 2019.05.09
[jquery] ajax 파일 업로드 progress bar 표시  (2) 2019.04.15
[jquery] Drag and Drop 으로 이미지 파일 업로드  (2) 2019.04.12

티스토리툴바