메뉴 건너뛰기

조회 수 920 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

게시판에서 전체 선택을 체크하는 경우가 생긴다. 

그럴 경우 맨 위에 체크박스(checkbox)를 클릭할 시 아래 체크박스들의 속성으로 checked를 넣는다는 방식으로 하면 된다.


$(document).on("click", "#checkAll", function(){
    if (! $('#checkAll').attr('checked')) {
            $('.checkSelect').attr('checked', false);
    }else{
        $('.checkSelect').attr('checked', 'checked');
    }
});


아래는 테이블의 제목인 체크박스이다.

<th><input type="checkbox" name="" id="checkAll" /></th>

<td><input type="checkbox" name="chk_box" class="checkSelect"/></td>

테이블 제목에 있는 체크박스를 클릭할 경우 #checkAll의 속성에 checked가 없을 경우 나머지 체크박스들의 checked를 false로 바꾸고(선택 해제)

만약 체크되어있다면 체크박스들의 속성을 checked, checked로 넣는다는 것이다.(전체 선택)



만약 전체 선택 후에 개별 체크부분을 누를 경우 전체 선택이 해제되야되기 때문에 그 부분도 스크립트를 넣어야한다.


$(document).on("click", ".checkSelect", function(){
    $("#checkAll").attr('checked', false);
});


.checkSelect (개별선택)을 클릭(해제)했을 경우 #checkAll(전체선택)의 속성에서 checked를 false로 선택해제한다.




List of Articles
번호 제목 날짜 조회 수
185 오늘 날짜 구하기 2018.11.07 320
184 jQuery 엘리먼트 선택 2018.10.26 453
183 자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode() 2018.10.26 444
182 자바스크립트 배열 중복값 다루기 2018.10.26 828
181 JavaScript 출생년도에 따른 나이 계산 자바스크립트 2018.09.28 497
180 엔터키 / enter key submit form 2018.09.27 390
179 팝업창 차단 "허용 메시지" 2018.09.27 440
178 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 398
177 key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 419
176 유용한 스크립트 모음 2018.07.24 630
175 cross site scripting을 막기위한...javascript 2018.07.24 578
174 다음 우편번호(주소) api 예시 file 2018.07.04 1251
173 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 1090
172 반복문 사용할때 태그 식별하기 data-item 2018.07.04 619
171 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 772
» 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 920
169 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 756
168 Javascript selectbox selected 컨트롤 file 2018.06.21 1130
167 새로고침(F5) 금지 2018.03.28 1823
166 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 8656
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved