특별한 일상

[JavaScript] 체크박스 전체 선택/해제 본문

IT•개발 끄적/JavaScript

[JavaScript] 체크박스 전체 선택/해제

소다맛사탕 2021. 4. 3. 15:35
반응형

안녕하세요. 소다맛사탕 입니다.

간단한 체크박스 전체 선택 및 해제를 알아보겠습니다.

 

HTML

<input type="checkbox" name="chkedAll" checked="checked">전체</input>
<input type="checkbox" name="chkedlist" id="chkedparam1">가</input>
<input type="checkbox" name="chkedlist" id="chkedparam2">나</input>
<input type="checkbox" name="chkedlist" id="chkedparam3">다</input>
<input type="checkbox" name="chkedlist" id="chkedparam4">라</input>
<input type="checkbox" name="chkedlist" id="chkedparam5">마</input>

 


javaScript

$(document).ready(function(){
	$("input:checkbox[name='chkedAll']").prop("checked",true);
	$("input:checkbox[name='chkedAll']").click(function(){
    	if("input:checkbox[name='chkedAll']").is(":checked") == true){
        	$("input:checkbox[name='chkedlist']").prop("checked",true);
        } else {
        	$("input:checkbox[name='chkedlist']").prop("checked",false);
        }
    });
});

맨처음에 전체 체크박스가 전체 체크되어 있게 한다.

'전체' 체크박스 클릭시 모든 체크박스 선택/해제 됨

 

간단하지만..글 끄적.

Comments