체크박스 전체선택 및 선택삭제

체크박스를 전체 선택하고 삭제버튼 누를시 선택한 리스트 삭제하는 코드

html 부분

//전체선택버튼
<label class="k-checkbox">
	<input type="checkbox" id="checkbox_all" onclick="chk_all()">
	<span></span>
</label>

//리스트쪽 체크박스
<label class="k-checkbox">
	<input type="checkbox" class="list_check">
	<span></span>
</label>

 

javascript 부분

//체크박스 전체 선택
function chk_all(){

	if($("#checkbox_all").is(":checked")){
		$('.list_check').prop('checked', true);
	}else{
		$('.list_check').prop('checked', false);
	}

}

//선택라인 모두 삭제
function chk_remove(){

	$.each ($('.list_check'), function (index, value) {
		let obj = $(value);

		if(obj.is(":checked")){
			let tr = obj.parent().parent().parent(); //요소에 따라 변경필요

			tr.remove();
		}
	});
	
}

 

버튼을 눌렀을 때 같은 class 명을 가지고 있는 요소들을 모두 check 하거나 check 를 해제하는 코드이다.

 

chk_remove의 경우 해당 tr 라인을 삭제해버리는 코드이니 

table 속에 tr 부분에 삭제버튼을 만들게 되면 사용할만하다.

table 속 요소에 따라 obj.parent() 부분은 변경이 필요하다