jquery 체크박스 전체 선택 및 해제

jquery 체크박스 전체 선택 및 해제

html

<table border="1">

    <tr>

        <td><input type="checkbox" id="checkall" /></td>

        <td>내용</td>

    </tr>

    <tr>

        <td><input type="checkbox" name="chk" /></td>

        <td>테스트내용입니다테스트내용입니다</td>

    </tr>

    <tr>

        <td><input type="checkbox" name="chk" /></td>

        <td>안녕하세요개발로짜입니다안녕하세요개발로짜입니다</td>

    </tr>

</table>

-----------------------------------------------------------------------------------------

jquery

type 1 : 특정 name의 check

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>

$(document).ready(function(){

    //최상단 체크박스 클릭

    $("#checkall").click(function(){

        //클릭되었으면

        if($("#checkall").prop("checked")){

            //input태그의 name이 chk인 태그들을 찾아서 checked옵션을 true로 정의

            $("input[name=chk]").prop("checked",true);

            //클릭이 안되있으면

        }else{

            //input태그의 name이 chk인 태그들을 찾아서 checked옵션을 false로 정의

            $("input[name=chk]").prop("checked",false);

        }

    })

})

</script>

type 2 : 모든 체크박스

<script>

$(function(){

$("#checkall").click(function(){

if($("#checkall").prop("checked")){

$("input[type=checkbox]").prop("checked",true);

}else{

$("input[type=checkbox").prop("checked",false);

}

});

});

</script>

[출처] http://hellogk.tistory.com/5 

----------------------------------------------------------------

type 3 : 심플하게 class명으로 처리(개인적으로 가장 좋아하는 방법)

<script>

$(function(){

$("#checkall").click(function(){

if($("#checkall").prop("checked")){

$(".chkbox").prop("checked",true);

}else{

$(".chkbox").prop("checked",false);

}

});

});

</script>