728x90
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var checked=$("#all").is(':checked'); $("input[type=checkbox]").prop('checked', !checked); }); }); </script> </head> <body> <div>전체<input type="checkbox" id="all"></div> <div>원피스<input type="checkbox" id="ck1"></div> <div>나루토<input type="checkbox" id="ck2"></div> <div>검정고무신<input type="checkbox" id="ck3"></div> <button>Clcik1</button> <button>Clcik2</button> <button>Clcik3</button> <div id="view"></div> </body> </html> | cs |
.is(':checked')
체크 박스가 체크되었는지 확인하는 요소이다.
.prop('checked', !checked)
이전에 확인한 checked 변수의 반대 값을 사용하여 모든 체크박스의 체크 상태를 변경한다.
즉, 만약 "전체 선택" 체크박스가 체크되어 있다면, 모든 체크박스가 체크 해제되고, 그 반대의 경우에는 모든 체크박스가 체크된다.
만약 Click1 의 버튼만 활성화 하고싶다면
1 2 3 4 5 | $("button").eq(0).click(function(){ var checked=$("#ck1").is(':checked'); console.log(checked); $("#ck1").prop('checked', !checked); }); | cs |
.eq(0) 와 같이 위 코드에 한줄만 추가해주면 된다.
반응형
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] RestApi 사용해서 Ajax 데이터 뽑아내기 (0) | 2023.09.13 |
|---|---|
| [jQuery] JSON 데이터 띄우기 (prop, each, attr) (0) | 2023.09.07 |
| [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 (0) | 2023.09.07 |
| [jQuery] 입력 문자열 제한 keyup( ) 과 slice( ) (0) | 2023.09.05 |
| [jQuery] 버튼 hover로 색상변경 addClass, removeClass (0) | 2023.09.04 |
댓글