checkbox 전체 체크

checkbox 전체 체크(선택)

javascript 전체 선택/해제

function checkAll(isChecked) {
    // 모든 체크박스를 선택
    // isChecked가 true면 모두 체크, false면 모두 해제
    document.querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
        checkbox.checked = isChecked;
    });
}

jquery 전체 선택/해제

function checkAllJquery(isChecked) {
    // 모든 체크박스를 선택
    // isChecked가 true면 모두 체크, false면 모두 해제
    $('input[type="checkbox"]').prop('checked', isChecked);
}

아래는 html 예제

<html>
<head>
    <title>checkbox 전체 체크</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        function checkAll(isChecked) {
            document.querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
                checkbox.checked = isChecked;
            });
        }

        function checkAllJquery(isChecked) {
            $('input[type="checkbox"]').prop('checked', isChecked);
        }

    </script>
</head>
<body>
    <form>
        <input type="checkbox" id="chk0" name="chk0" /><label for="chk0">일</label>
        <input type="checkbox" id="chk1" name="chk1" /><label for="chk1">월</label>
        <input type="checkbox" id="chk2" name="chk2" /><label for="chk2">화</label>
        <input type="checkbox" id="chk3" name="chk3" /><label for="chk3">수</label>
        <input type="checkbox" id="chk4" name="chk4" /><label for="chk4">목</label>
        <input type="checkbox" id="chk5" name="chk5" /><label for="chk5">금</label>
        <input type="checkbox" id="chk6" name="chk6" /><label for="chk6">토</label>

        <br />
        <button onclick="checkAll(true); return false;">javascript 전체 체크</button>
        <button onclick="checkAll(false); return false;">javascript 전체 해제</button>

        <br />
        <button onclick="checkAllJquery(true); return false;">jquery 전체 체크</button>
        <button onclick="checkAllJquery(false); return false;">jquery 전체 해제</button>
    </form>
</body>
</html>

table checkbox 전체 체크(선택)

table javascript 전체 선택/해제

function toggleAllCheckboxes(isChecked) {
    // tbody 안의 모든 체크박스를 선택
    document.querySelectorAll('tbody input[type="checkbox"]').forEach(function (checkbox) {
        checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
    });
}

$(document).ready(function () {
    document.getElementById('chkNo').addEventListener('change', function () {
        toggleAllCheckboxes(this.checked);
    });
});

table jquery 전체 선택/해제

$(document).ready(function () {
    // thead의 체크박스 클릭 이벤트 처리
    $('thead input[type="checkbox"]').on('change', function () {
        // thead 체크박스 상태에 따라 tbody 내의 모든 체크박스를 체크 또는 해제
        $('tbody input[type="checkbox"]').prop('checked', this.checked);
    });
});

table checkbox 전체 체크 html 예제

<html>
<head>
    <title>checkbox 전체 체크</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        function checkAll(isChecked) {
            document.querySelectorAll('input[type="checkbox"]').forEach(function (checkbox) {
                checkbox.checked = isChecked;
            });
        }

        function checkAllJquery(isChecked) {
            $('input[type="checkbox"]').prop('checked', isChecked);
        }

        function toggleAllCheckboxes(isChecked) {
            // tbody 안의 모든 체크박스를 선택
            document.querySelectorAll('tbody input[type="checkbox"]').forEach(function (checkbox) {
                checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
            });
        }

        $(document).ready(function () {
            document.getElementById('chkNo').addEventListener('change', function () {
                toggleAllCheckboxes(this.checked);
            });
        });

        /*$(document).ready(function () {
            // thead의 체크박스 클릭 이벤트 처리
            $('thead input[type="checkbox"]').on('change', function () {
                // thead 체크박스 상태에 따라 tbody 내의 모든 체크박스를 체크 또는 해제
                $('tbody input[type="checkbox"]').prop('checked', this.checked);
            });
        });*/

    </script>
</head>
<body>
    <form>
        <input type="checkbox" id="chk0" name="chk0" /><label for="chk0">일</label>
        <input type="checkbox" id="chk1" name="chk1" /><label for="chk1">월</label>
        <input type="checkbox" id="chk2" name="chk2" /><label for="chk2">화</label>
        <input type="checkbox" id="chk3" name="chk3" /><label for="chk3">수</label>
        <input type="checkbox" id="chk4" name="chk4" /><label for="chk4">목</label>
        <input type="checkbox" id="chk5" name="chk5" /><label for="chk5">금</label>
        <input type="checkbox" id="chk6" name="chk6" /><label for="chk6">토</label>

        <br />
        <button onclick="checkAll(true); return false;">javascript 전체 체크</button>
        <button onclick="checkAll(false); return false;">javascript 전체 해제</button>

        <br />
        <button onclick="checkAllJquery(true); return false;">jquery 전체 체크</button>
        <button onclick="checkAllJquery(false); return false;">jquery 전체 해제</button>


        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" id="chkNo" name="chkNo" /></td>
                </tr>
            </thead>
            <tbody>
                <tr><td><input type="checkbox" id="chkNo1" name="chkNo1" /></td></tr>
                <tr><td><input type="checkbox" id="chkNo2" name="chkNo2" /></td></tr>
                <tr><td><input type="checkbox" id="chkNo3" name="chkNo3" /></td></tr>
                <tr><td><input type="checkbox" id="chkNo4" name="chkNo4" /></td></tr>
                <tr><td><input type="checkbox" id="chkNo5" name="chkNo5" /></td></tr>
            </tbody>
        </table>

    </form>
</body>
</html>

table checkbox 전체 체크( checkbox 2개 있을 경우)

table checkbox 2개 일경우 javascript 전체 선택/해제

function toggleAllCheckboxes(isChecked) {
    // tbody 안의 모든 체크박스를 선택
    document.querySelectorAll('tbody input[id^="chkNo"]').forEach(function (checkbox) {
        checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
    });
}

function toggleAllCheckboxesType(isChecked) {
    // tbody 안의 모든 체크박스를 선택
    document.querySelectorAll('tbody[id="body1"] input[id^="chkType"]').forEach(function (checkbox) {
        checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
    });
}

$(document).ready(function () {

    document.getElementById('chkNo').addEventListener('change', function () {
        toggleAllCheckboxes(this.checked);
    });

    document.getElementById('chkType').addEventListener('change', function () {
        toggleAllCheckboxesType(this.checked);
    });
});

table checkbox 2개 일경우 jquery 전체 선택/해제

$(document).ready(function () {
    // chkNo의 체크박스 상태에 따라 tbody 내의 chkNo로 시작하는 체크박스 체크/해제
    $('#chkNo').on('change', function () {
        $('input[id^="chkNo"]').prop('checked', this.checked);  // 체크박스의 체크 상태 적용
    });

    // chkType의 체크박스 상태에 따라 tbody 내의 chkType으로 시작하는 체크박스 체크/해제
    $('#chkType').on('change', function () {
        $('input[id^="chkType"]').prop('checked', this.checked);  // 체크박스의 체크 상태 적용
    });
});

table checkbox 2개일 경우 전체 체크 html 예제

<html>
<head>
    <title>checkbox 전체 체크</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        function toggleAllCheckboxes(isChecked) {
            // tbody 안의 모든 체크박스를 선택
            document.querySelectorAll('tbody input[id^="chkNo"]').forEach(function (checkbox) {
                checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
            });
        }

        function toggleAllCheckboxesType(isChecked) {
            // tbody 안의 모든 체크박스를 선택
            document.querySelectorAll('tbody[id="body1"] input[id^="chkType"]').forEach(function (checkbox) {
                checkbox.checked = isChecked;  // isChecked 값에 따라 체크 또는 해제
            });
        }

        $(document).ready(function () {

            document.getElementById('chkNo').addEventListener('change', function () {
                toggleAllCheckboxes(this.checked);
            });

            document.getElementById('chkType').addEventListener('change', function () {
                toggleAllCheckboxesType(this.checked);
            });
        });

        /*$(document).ready(function () {
            // chkNo의 체크박스 상태에 따라 tbody 내의 chkNo로 시작하는 체크박스 체크/해제
            $('#chkNo').on('change', function () {
                $('input[id^="chkNo"]').prop('checked', this.checked);  // 체크박스의 체크 상태 적용
            });

            // chkType의 체크박스 상태에 따라 tbody 내의 chkType으로 시작하는 체크박스 체크/해제
            $('#chkType').on('change', function () {
                $('input[id^="chkType"]').prop('checked', this.checked);  // 체크박스의 체크 상태 적용
            });
        });*/

    </script>
</head>
<body>
    <form>
        
        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" id="chkNo" name="chkNo" /></td>
                    <td><input type="checkbox" id="chkType" name="chkType" /></td>
                </tr>
            </thead>
            <tbody id="body1">
                <tr>
                    <td><input type="checkbox" id="chkNo1" name="chkNo1" /></td>
                <td><input type="checkbox" id="chkType1" name="chkType1" /></td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkNo2" name="chkNo2" /></td>
                    <td><input type="checkbox" id="chkType2" name="chkType2" /></td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkNo3" name="chkNo3" /></td>
                    <td><input type="checkbox" id="chkType3" name="chkType3" /></td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkNo4" name="chkNo4" /></td>
                    <td><input type="checkbox" id="chkType4" name="chkType4" /></td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="chkNo5" name="chkNo5" /></td>
                    <td><input type="checkbox" id="chkType5" name="chkType5" /></td>
                </tr>
            </tbody>
        </table>

    </form>
</body>
</html>

'dev > jquery' 카테고리의 다른 글

html checkbox 값 설정 (0)	2024.09.22
html checkbox value 값 가져오기 (0)	2024.09.22
html radio,checkbox label 클릭 (0)	2024.09.17
html radio 값 설정 (0)	2024.09.17
html radio value 값 가져오기 (1)	2024.09.17

이상한개발

checkbox 전체 체크

'dev > jquery' 카테고리의 다른 글

티스토리툴바

checkbox 전체 체크

'dev > jquery' 카테고리의 다른 글

'dev/jquery' Related Articles

티스토리툴바