jQuery 체크박스를 라디오버튼처럼 사용하기

체크박스 그룹에서 하나만 선택되도록 라디오버튼처럼 동작하게 만드는 방법입니다.

기본 방법

// 클릭한 체크박스 외 나머지 체크 해제
$(".target-classes").not($(".click-class")).attr("checked", false);

이벤트 핸들러로 구현

// jQuery 1.6 이상에서는 prop() 사용 권장
$(".checkbox-group").click(function() {
    // 같은 그룹의 다른 체크박스 해제
    $(".checkbox-group").not(this).prop("checked", false);
});

// 또는
$("input[name=myGroup]").change(function() {
    $("input[name=myGroup]").not(this).prop("checked", false);
});

name 속성 기반 구현

<!-- HTML -->
<input type="checkbox" name="option" class="single-check" value="1"> 옵션1
<input type="checkbox" name="option" class="single-check" value="2"> 옵션2
<input type="checkbox" name="option" class="single-check" value="3"> 옵션3

<script>
$(".single-check").on("change", function() {
    if ($(this).is(":checked")) {
        // 현재 체크박스 외 모두 해제
        $(".single-check").not(this).prop("checked", false);
    }
});
</script>

그룹별 단일 선택

<!-- 그룹 A -->
<input type="checkbox" data-group="A" value="1">
<input type="checkbox" data-group="A" value="2">

<!-- 그룹 B -->
<input type="checkbox" data-group="B" value="1">
<input type="checkbox" data-group="B" value="2">

<script>
$("input[type=checkbox][data-group]").change(function() {
    var group = $(this).data("group");
    if ($(this).is(":checked")) {
        $("input[data-group="" + group + ""]")
            .not(this)
            .prop("checked", false);
    }
});
</script>

테이블 행 단일 선택

$("table .row-checkbox").change(function() {
    if ($(this).is(":checked")) {
        // 다른 행의 체크박스 해제
        $("table .row-checkbox").not(this).prop("checked", false);
        
        // 선택된 행 강조
        $("table tr").removeClass("selected");
        $(this).closest("tr").addClass("selected");
    }
});

체크박스 vs 라디오버튼

특성체크박스라디오버튼
다중 선택가능불가능
선택 해제가능불가능 (다른 항목 선택 필요)
스타일링쉬움브라우저마다 다름

Tip: 체크박스를 라디오버튼처럼 사용하면 사용자가 선택을 해제할 수 있는 장점이 있습니다.