들어가는 말
jquery로 체크박스와 라디오 제어 관련하여 유형이 정해진 작업을 해야하는 경우가 많습니다. 유형별로 자주 사용하게 되는 작업을 정리해 보도록 하겠습니다.
체크박스
- 특정한 이름을 가진 체크박스 모두를 선택하거나 선택해제해야 하는 경우
자료가 출력된 상단 부분에 체크박스가 있어서 체크되면 아래의 체크박스가 모두 선택되고 해제하면 모두 해제되는 경우의 처리입니다. 한 화면에서 체크박스가 나타나는 영역이 여러개 있을 때 체크박스의 이름을 영역별로 다르게 하여 전체선택/해제가 각각 동작할 수 있도록 작업할 수 있습니다.<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) }); } }
- 체크된 값을 가져와야 하는 경우
사용자에 의하여 선택된 값을 하나의 문자열로 만들고 그것을 서버에 전달하여 처리할 때 많이 사용하게 되는 유형입니다. 다음의 예는 선택된 체크박스의 값을 컴마로 구분하여 하나의 문자열로 합치는 방법입니다. join(“,”) 부분의 컴마를 다른 구분자로 변경하여도 됩니다.var selectDisplayCategory = $('input[name="display_category"]:checked').map(function () { return this.value; }).get().join(",");
라디오
- 임의로 선택해야 하는 경우
DB에서 값을 가져와서 그에 따라 어떤 것이 선택되었는지 설정을 해 주어야 하는 경우가 많습니다. 그런 경우에 사용되는 방법입니다.<input type="radio" name="ownLinkShow" id="ownLinkShowYes" value="1" /> <label for="ownLinkShowYes">예</label> <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>
- 선택되지 않은 상태로 바꾸어야 하는 경우
때때로 사용자가 선택 후 초기상태로 변경해야 하는 경우가 있습니다. 그럴 때 아예 선택하지 않은 상태로 전환하는 방법입니다. 라디오 필드에 class를 지정한 후(아래의 보기에서는 ownLinkGroup) 스크립트 부분에서 checked 속성을 false 로 전환하는 방법입니다.<input type="radio" name="ownLinkShow" id="ownLinkShowYes" value="1" class="ownLinkGroup" /> <label for="ownLinkShowYes">예</label> <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로 체크박스와 라디오 제어 하는 몇 가지 자주 사용하는 유형에 대하여 살펴보았습니다.