설문을 받거나 회원 가입을 하는 경우 사용자의 정보를 알기 위해서 체크박스를 사용하는 경우가 있다 이런 경우에 사용자 입장에서 모든 것을 선택하고 모든 선택을 해제해야 하는 경우가 있는데 이런 것을 제이쿼리로 구현이 가능하다.
간단하게 구현 가능한 기능.
코드 : 체크박스 모두 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#all").click(function() {
if(this.checked)
{
$("#item input").attr("checked",true);
}
else
{
$("#item input").attr("checked",false);
}
});
});
</script>
</head>
<body>
<h2>취미</h2>
<input type="checkbox" id="all">
모두
<div id="item">
<input type="checkbox">책읽기
<input type="checkbox">영화보기
<input type="checkbox">노래듣기
<input type="checkbox">요리하기
<input type="checkbox">게임하기
</div>
</body>
</html>
결과 : 사용자 HTML
ㅇ 모두라는 체크박스를 클릭하면 전체 선택이 되고, 전체 해제가 되는 기능
반응형
'Java Script > jQuery' 카테고리의 다른 글
| 동일 예제 JavaScript VS jQuery 비교! (0) | 2019.05.14 |
|---|---|
| jQuery 예제, 버튼 이벤트로 정보 숨기고 보이기(토글) (0) | 2019.05.14 |
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
| jQuery 이벤트 메소드 (0) | 2019.05.14 |
댓글