jquery

jQuery checkbox 전체 선택/해제 예제

mirinae.maru

▶︎ jquery를 이용해서 체크박스를 전체를 선택하고 전체 선택 해제를 하는 방법을 알아본다.

▶︎ check_all 체크박스에서 체크를 한다든지 체크를 해제한다던지의 변화가 일어나면 

$('#check_all').change(function()

▶︎ check_all 체크박스가 체크되면 true 

$("#check_all").is(":checked")

▶︎ ‘check_unit_’로 시작하는 모든 id를 순환해서 checked속성을 true로 변경한다. 즉 ‘check_unit_’로 시작하는 모든 id에 대해서 체크박스 체크를 한다.

$('input[id^="check_unit_"]').each((index, item) => {
    $(item).prop("checked", true);
});

▶︎ 전체 소스

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>jquery - 전체 선택/해제 체크 박스</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />

    <script type="text/javascript">
    $(function(){
        console.log( '>>> start...' );

        $('#check_all').change(function(){
            if($("#check_all").is(":checked")) {
                $('input[id^="check_unit_"]').each((index, item) => {
                    $(item).prop("checked", true);
                });
            }
            else {
                $('input[id^="check_unit_"]').each( (index,item)=>{
                    $(item).prop("checked", false);
                });
            }
        });
    });
    </script>

</head>
<body>

<input type="checkbox" id="check_all" name="check_all"/> <b>전체 선택</b>         <br/><br/>
<input type="checkbox" id="check_unit_01" name="check_unit"/> check unit 01     <br/>
<input type="checkbox" id="check_unit_02" name="check_unit"/> check unit 02     <br/>
<input type="checkbox" id="check_unit_03" name="check_unit"/> check unit 03     <br/>
<input type="checkbox" id="check_unit_04" name="check_unit"/> check unit 04     <br/>
<input type="checkbox" id="check_unit_05" name="check_unit"/> check unit 05     <br/>

</body>
</html>