자바스크립트로 멀티 체크박스 다중 선택 박스 제어하기

-

 

-

안녕하세요! 오늘은 웹 페이지에서 멀티 체크박스를 제어하는 자바스크립트(jQuery) 로직을 소개하려고 해요.
여러 개의 체크박스를 한 번에 제어하거나, 사용자가 선택한 항목을 배열 또는 JSON으로 처리하는 방법을 알아볼 거예요.
실제로 웹 폼을 만들 때 자주 사용되는 기능이니까, 이해하고 활용할 수 있으면 유용하답니다.

 

1. 전체 선택 체크박스 만들기

먼저, 전체 선택 체크박스를 만들어보죠.
하나의 체크박스를 클릭하면, 관련된 모든 체크박스가 자동으로 체크되거나 해제되는 방식입니다.

$(document).ready(function() {
    $("#chkAgreeAll").on('click', function() {
        // 전체 동의 체크박스가 체크되었으면, 나머지 체크박스도 체크
        if ($(this).is(":checked")) {
            $("#chkAgree1").prop("checked", true);
            $("#chkAgree2").prop("checked", true);
        } else {
            // 체크 해제되면, 나머지 체크박스도 해제
            $("#chkAgree1").prop("checked", false);
            $("#chkAgree2").prop("checked", false);
        }
    });
});

 

<input type="checkbox" id="chkAgreeAll"> 전체 동의
<div>
    <input type="checkbox" id="chkAgree1"> 항목 1
</div>
<div>
    <input type="checkbox" id="chkAgree2"> 항목 2
</div>

이 코드에서는 #chkAgreeAll 체크박스가 체크되면 #chkAgree1과 #chkAgree2도 자동으로 체크되고, #chkAgreeAll이 해제되면 다른 체크박스들도 모두 해제됩니다.

 

2. 다중 선택 체크박스 제어하기

다음으로, 다중 체크박스 제어 기능을 살펴볼게요.
예를 들어, 하나의 체크박스를 클릭해서 관련된 다른 체크박스들을 한 번에 체크하거나 해제할 수 있게 만드는 거예요.

function multiCheck(mId, sId) {
    var multiCheckVal = $("#" + mId).val(); 
    if (isEmpty(multiCheckVal)) { 
        $("." + sId).prop('checked', true); 
        $("#" + mId).val("on"); 
    } else { 
        $("." + sId).prop('checked', false); 
        $("#" + mId).val(""); 
    }
}

 

<input type="checkbox" id="mChk" name="mChk" value="" onclick="multiCheck('mChk', 'sChk');" />
<div>
    <input type="checkbox" class="sChk" value="1"> 항목 1
</div>
<div>
    <input type="checkbox" class="sChk" value="2"> 항목 2
</div>

여기서 multiCheck 함수는 #mChk가 체크되면 sChk 클래스의 체크박스를 모두 체크하고, #mChk가 해제되면 sChk 클래스의 체크박스를 모두 해제합니다.

 

3. 체크된 항목 배열로 저장하기

체크박스를 사용하면서 중요한 점 중 하나는, 사용자가 선택한 항목을 배열로 저장하거나 서버로 전송하는 일이죠.
체크된 값만 배열에 저장하고, 나중에 이를 활용할 수 있습니다.

function checkboxArray(id) {
    var array = Array();
    var chkbox = $("." + id);
    for (i = 0; i < chkbox.length; i++) {
        if (chkbox[i].checked == true) {
            array.push(chkbox[i].value);
        }
    }
    return array;
}

이 함수는 sChk 클래스를 가진 체크박스들 중 체크된 항목의 값을 배열로 반환합니다.
이렇게 반환된 배열을 서버에 전달할 수도 있고, 다른 작업에 활용할 수 있어요.

 

4. 체크박스를 JSON 형태로 처리하기

더 나아가서, 체크된 항목을 JSON 형식으로 변환해서 서버로 보내는 방법도 있습니다.
주로 서버와 데이터를 주고받을 때 유용하죠.

function checkboxJsonArray(id, key) {
    var jArr = [];
    var chkbox = $("." + id);
    for (i = 0; i < chkbox.length; i++) {
        if (chkbox[i].checked == true) {
            var jObj = parseJsonObject(key, chkbox[i].value);
            jArr.push(jObj);
        }
    }
    return jArr;
}

function parseJsonObject(key, val) {
    var param = {};
    param[key] = val;
    return param;
}

이 함수는 체크된 항목을 key라는 이름으로 JSON 객체로 만들어 배열에 추가합니다.
예를 들어, 체크박스를 통해 선택된 항목들을 서버에 JSON 형식으로 전송할 때 유용하게 사용할 수 있습니다.

 

5. 응용 예제: 서버에 JSON으로 전송하기

모든 기능을 종합해서, 사용자가 선택한 체크박스를 JSON 형식으로 서버에 전송하는 예제를 만들어보겠습니다.

$(document).ready(function() {
    // 전체 선택 체크박스 클릭 시, 다른 체크박스들도 체크/해제
    $("#chkAgreeAll").on('click', function() {
        if ($(this).is(":checked")) {
            $(".sChk").prop("checked", true);
        } else {
            $(".sChk").prop("checked", false);
        }
    });

    // 제출 버튼 클릭 시 선택된 항목들을 JSON으로 변환하여 전송
    window.submitForm = function() {
        var selectedItems = checkboxJsonArray('sChk', 'itemId');
        var jsonData = JSON.stringify(selectedItems);
        
        console.log(jsonData);  // 서버로 전송할 JSON 데이터
        // 서버에 POST 요청을 보낼 수도 있어요.
        // $.ajax({
        //     url: '/submit',
        //     method: 'POST',
        //     data: { selectedItems: jsonData },
        //     success: function(response) {
        //         console.log(response);
        //     }
        // });
    };
});

 

<div>
    <input type="checkbox" id="chkAgreeAll"> 전체 동의
</div>
<div>
    <input type="checkbox" class="sChk" value="1"> 항목 1
</div>
<div>
    <input type="checkbox" class="sChk" value="2"> 항목 2
</div>
<div>
    <button onclick="submitForm()">제출</button>
</div>

이 코드는 전체 동의 체크박스를 클릭하면 나머지 체크박스가 모두 체크되거나 해제되고,
제출 버튼을 클릭하면 선택된 항목들을 JSON 형식으로 서버에 전송할 준비를 합니다.

 

이번 글에서는 자바스크립트(jQuery)를 사용하여 멀티 체크박스를 제어하는 여러 가지 방법을 알아보았어요.
전체 선택 체크박스, 다중 선택 체크박스, 선택된 항목을 배열이나 JSON 형식으로 저장하는 방법까지 살펴봤죠.
이를 통해 여러분이 실제 웹 개발을 할 때, 더 효율적이고 유용한 방식으로 체크박스를 제어할 수 있을 거예요.

웹 폼이나 동적인 인터페이스에서 체크박스를 다룰 일이 많을 텐데, 이번 글을 통해 기본적인 개념을 익히셨다면 다양한 상황에 맞게 응용하실 수 있을 거예요.
그럼, 다음 글에서 또 만나요!