[jQuery] 다수의 checkbox 값 Array로 받기

데이터 조회 화면에서 <table>에 담긴 다수의 <checkbox>의 값을 다룰때가 종종 있는데요. 편하게 사용할 수 있도록 하나의 Array 변수에 받아와 보겠습니다.

 

사용법

<form>
    <input type="checkbox" name="checkbox1" value="1" />
    <input type="checkbox" name="checkbox2" value="2" />
    <input type="checkbox" name="checkbox3" value="3" />
    <input type="checkbox" name="checkbox4" value="4" />
    <input type="checkbox" name="checkbox5" value="5" />
    <input type="checkbox" name="checkbox6" value="6" />
    <input type="checkbox" name="checkbox7" value="7" />
    <input type="checkbox" name="checkbox8" value="8" />
    <input type="checkbox" name="checkbox9" value="9" />
    <input type="checkbox" name="checkbox10" value="10" />

    <button type="button" id="submit">제출</button>
</form>

<script>
    $(document).ready(function () {
        $('#submit').on('click', function () { 
            console.log(getCheckedArray());
        })
    })

    function getCheckedArray() {
        let Checkedbox = $('input:checkbox:checked');
        let rtnArray = [];
        
        $.each(Checkedbox, function (index, item) {
            rtnArray.push(item.value);
        });
        return rtnArray;
    }
</script>