개발관련/javascript&jquery

[Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기

🐻곰이🐻 2022. 8. 2.

728x90

안녕하세요 개발쉽게하자곰 입니다.

오랜만에 개발 관련 포스팅 써보네요!

오늘은 jquery로 체크박스 전체 선택 관련해서 써볼까 합니다.

우선 셀렉터를 input에 name으로 잡았을 때에 처리하는 방법입니다.

함수를 이용한 방법

prop 방식

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		//전체선택 함수
		function all_check()
		{
			$("input[name='check']").prop("checked", true);
		}
	</script>
</head>

<body>
	<h2>오늘의 점심</h2>
	<button onclick="all_check();">전체선택</button>
	<input type="checkbox" name="check" id="check_id" value="1">국밥
	<input type="checkbox" name="check" id="check_id" value="1">햄버거
	<input type="checkbox" name="check" id="check_id" value="1">칼국수
	<input type="checkbox" name="check" id="check_id" value="1">중식
	<input type="checkbox" name="check" id="check_id" value="1">초밥
	<input type="checkbox" name="check" id="check_id" value="1">파스타
	<input type="checkbox" name="check" id="check_id" value="1">피자
</body>
</html>

easy-developmentbear

오늘의 점심

국밥 햄버거 칼국수 중식 초밥 파스타 피자

전체 선택 시 이렇게 전체적으로 선택되는 모습입니다.

attr 방식

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		//전체선택 함수
		function all_check2()
		{
			$("input[name='check1']").attr("checked", true);
		}
	</script>
</head>

<body>
	<h2>오늘의 점심</h2>
	<button onclick="all_check2();">전체선택</button>
	<input type="checkbox" name="check1" id="check_id" value="1">국밥
	<input type="checkbox" name="check1" id="check_id" value="1">햄버거
	<input type="checkbox" name="check1" id="check_id" value="1">칼국수
	<input type="checkbox" name="check1" id="check_id" value="1">중식
	<input type="checkbox" name="check1" id="check_id" value="1">초밥
	<input type="checkbox" name="check1" id="check_id" value="1">파스타
	<input type="checkbox" name="check1" id="check_id" value="1">피자
</body>
</html>

easy-developmentbear

오늘의 점심

국밥 햄버거 칼국수 중식 초밥 파스타 피자

prop 말고도 이렇게 attr로도 전체 선택을 구현할 수 있습니다.

on(), click() 함수를 이용한 방법.

click() 함수 이용

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(function(){
			$("#all_chk").click(function(){
				$("input[name='check2']").prop("checked", true);
			});
		});
	</script>
</head>

<body>
	<h2>오늘의 점심</h2>
	<button id="all_chk">전체선택</button>
	<input type="checkbox" name="check2" id="check_id" value="1">국밥
	<input type="checkbox" name="check2" id="check_id" value="1">햄버거
	<input type="checkbox" name="check2" id="check_id" value="1">칼국수
	<input type="checkbox" name="check2" id="check_id" value="1">중식
	<input type="checkbox" name="check2" id="check_id" value="1">초밥
	<input type="checkbox" name="check2" id="check_id" value="1">파스타
	<input type="checkbox" name="check2" id="check_id" value="1">피자
</body>
</html>

easy-developmentbear

오늘의 점심

국밥 햄버거 칼국수 중식 초밥 파스타 피자

on() 함수 이용

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(function(){
			$("#all_chk3").on('click',function(){
				$("input[name='check3']").prop("checked", true);
			});
		});
	</script>
</head>

<body>
	<h2>오늘의 점심</h2>
	<button id="all_chk3">전체선택</button>
	<input type="checkbox" name="check3" id="check_id" value="1">국밥
	<input type="checkbox" name="check3" id="check_id" value="1">햄버거
	<input type="checkbox" name="check3" id="check_id" value="1">칼국수
	<input type="checkbox" name="check3" id="check_id" value="1">중식
	<input type="checkbox" name="check3" id="check_id" value="1">초밥
	<input type="checkbox" name="check3" id="check_id" value="1">파스타
	<input type="checkbox" name="check3" id="check_id" value="1">피자
</body>
</html>

easy-developmentbear

오늘의 점심

국밥 햄버거 칼국수 중식 초밥 파스타 피자

이렇게 onclick 옵션을 직접 안주고 내장 함수로 해결할 수 있습니다.

전체 선택과 전체 선택 해제

많이 알려진 prop으로 구현해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
	<script>
		$(function(){
			$("#all_chk2").on('click',function(){
				//체크박스 check상태가 true라면
				if($("input[name='check4']").prop("checked"))
				{
					//name이 check4 인 체크박스 해제
					$("input[name='check4']").prop("checked", false);
				}
				else
				{
					//name이 check4 인 체크박스 체크
					$("input[name='check4']").prop("checked", true);
				}
			});
		});
	</script>
</head>

<body>
	<h2>오늘의 점심</h2>
	<button id="all_chk2">전체선택</button>
	<input type="checkbox" name="check4" id="check_id" value="1">국밥
	<input type="checkbox" name="check4" id="check_id" value="1">햄버거
	<input type="checkbox" name="check4" id="check_id" value="1">칼국수
	<input type="checkbox" name="check4" id="check_id" value="1">중식
	<input type="checkbox" name="check4" id="check_id" value="1">초밥
	<input type="checkbox" name="check4" id="check_id" value="1">파스타
	<input type="checkbox" name="check4" id="check_id" value="1">피자
</body>
</html>

easy-developmentbear

오늘의 점심

국밥 햄버거 칼국수 중식 초밥 파스타 피자

이렇게 구현할 수 있겠네요 ㅎㅎ

포스팅 작성하면서 느낀 건데 각자 name값과 id값을 다르게 해야 겹치지 않더라고요 ㅎㅎ 새롭게 알아갑니다.

복사하실 분들은 name값 확인하시고 사용하시길 바랍니다 ㅎㅎ

다음에 더 좋은 정보로 돌아올게요 끝까지 봐주셔서 감사합니다!

저작자표시 비영리 변경금지

'개발관련 > javascript&jquery' 카테고리의 다른 글

Counter.js 를 써서 티스토리 블로그 방문자 수 애니메이션 효과 넣기 (2)	2022.08.19
[Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법 (0)	2022.08.02
[html/css/javascript/jquery] 셀렉터(Selector) 활용법! (0)	2020.11.25
Javascript & Jquery / "onblur" 속성으로 1000단위 콤마찍기! (0)	2020.11.24
[Javascript/Jquery] 제이쿼리로 천 단위 콤마 (1,000) 세자리마다 콤마찍기! (0)	2020.11.24
javascript/jquery 활용해서 간편 계산기 만들기! (0)	2020.11.24

[Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기

함수를 이용한 방법

오늘의 점심

오늘의 점심

on(), click() 함수를 이용한 방법.

오늘의 점심

오늘의 점심

전체 선택과 전체 선택 해제

오늘의 점심

'개발관련 > javascript&jquery' 카테고리의 다른 글

댓글

티스토리툴바