들어가는 말

jquery로 체크박스와 라디오 제어 관련하여 유형이 정해진  작업을 해야하는 경우가 많습니다. 유형별로 자주 사용하게 되는 작업을 정리해 보도록 하겠습니다.

체크박스

1. 특정한 이름을 가진 체크박스 모두를 선택하거나 선택해제해야 하는 경우
   자료가 출력된 상단 부분에 체크박스가 있어서 체크되면 아래의 체크박스가 모두 선택되고 해제하면 모두 해제되는 경우의 처리입니다. 한 화면에서 체크박스가 나타나는 영역이 여러개 있을 때 체크박스의 이름을 영역별로 다르게 하여 전체선택/해제가 각각 동작할 수 있도록 작업할 수 있습니다.

   <table class="table table-bordered table-hover displayCategoryTable">
    <thead>
    <tr>
    <th class="text-center"><input type="checkbox" id="checkbox_master" onclick="toggleCheckbox('checkbox_master', 'display_category')" /></th>
    <th>분류</th>
    </tr>
    </thead>
    <tbody id="list">
    <tr>
    <td class="checkboxColumn text-center"><input type="checkbox" name="display_category" value="1/></td>
    <td>1</td>
    </tr>
    <tr>
    <td class="checkboxColumn text-center"><input type="checkbox" name="display_category" value="2/></td>
    <td>1</td>
    </tr>
    </tbody>
   </table>
   
   function toggleCheckbox(checkMasterId, fieldName) {
    if ($('#' + checkMasterId).prop('checked') == true) {
    $('input:checkbox[name=' + fieldName + ']').each(function () { $(this).prop('checked', true) });
    }
    else {
    $('input:checkbox[name=' + fieldName + ']').each(function () { $(this).prop('checked', false) });
    }
   }
   

2. 체크된 값을 가져와야 하는 경우
   사용자에 의하여 선택된 값을 하나의 문자열로 만들고 그것을 서버에 전달하여 처리할 때 많이 사용하게 되는 유형입니다. 다음의 예는 선택된 체크박스의 값을 컴마로 구분하여 하나의 문자열로 합치는 방법입니다. join(“,”) 부분의 컴마를 다른 구분자로 변경하여도 됩니다.

   var selectDisplayCategory = $('input[name="display_category"]:checked').map(function () {
   	return this.value;
   }).get().join(",");
   

라디오

1. 임의로 선택해야 하는 경우
   DB에서 값을 가져와서 그에 따라 어떤 것이 선택되었는지 설정을 해 주어야 하는 경우가 많습니다. 그런 경우에 사용되는 방법입니다.

   <input type="radio" name="ownLinkShow" id="ownLinkShowYes" value="1" /> <label for="ownLinkShowYes">예</label>&nbsp;
   <input type="radio" name="ownLinkShow" id="ownLinkShowNo" value="0" checked="checked" /> <label for="ownLinkShowNo">아니오</label>
   
   <script>
   if (detail[0].ownLinkShow == 0)
   {
    $('#ownLinkShowNo').prop('checked', true);
   }
   else
   {
    $('#ownLinkShowYes').prop('checked', true);
   }
   </script>
   

2. 선택되지 않은 상태로 바꾸어야 하는 경우
   때때로 사용자가 선택 후 초기상태로 변경해야 하는 경우가 있습니다. 그럴 때 아예 선택하지 않은 상태로 전환하는 방법입니다. 라디오 필드에 class를 지정한 후(아래의 보기에서는 ownLinkGroup) 스크립트 부분에서 checked 속성을 false 로 전환하는 방법입니다.

   <input type="radio" name="ownLinkShow" id="ownLinkShowYes" value="1" class="ownLinkGroup" /> <label for="ownLinkShowYes">예</label>&nbsp;
   <input type="radio" name="ownLinkShow" id="ownLinkShowNo" value="0" class="ownLinkGroup" /> <label for="ownLinkShowNo">아니오</label>
   
   <button type="button" onclick="unselect();">초기화</button>
   <script>
   function unselect()
   {
    $('.ownLinkGroup').prop('checked', false);
   }
   </script>
   

    

이상으로 간략하게 jquery로 체크박스와 라디오 제어 하는 몇 가지 자주 사용하는 유형에 대하여 살펴보았습니다.