[jQuery] checkbox( 전체선택 )

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	
$(function(){
	$("#confirm").click(function(){
		$("#result").empty();
		
		//유효값처리
		if($("input[name=chk]:checked").length == 0){
			alert("하나 이상 선택해 주세요");
		}else{
			var total = 0;
			$("input[name=chk]:checked").each(function(i){
				//var chk = $(this);
				var chk = $("input[name=chk]:checked").eq(i);
				var book = chk.next().text();
				var price = chk.val();
				
				$("#result").append(book + " : " + price + "<br>");
				total += parseInt(price);
			});
			$("#result").append("총 : " + total);
		}
	});
	
	
	$("input[name=chk]").click(function(){
		if ($("input[name=chk]").length == $("input[name=chk]:checked").length) {
			$("input[name=all]").prop("checked",true);
		}else{
			$("input[name=all]").prop("checked",false);
		}
	});
});	


	function allcheck(bool){
		$("input[name=chk]").each(function(){
			// .attr : html의 속성(attrubute)
			// .prop : javascript의 속성(property)
			$(this).prop("checked", bool);
		})
	}

</script>
</head>
<body>
	
	<fieldset style="width: 300px;">
		<legend>체크 여부 확인</legend>
		
		<input type="checkbox" name="all" onclick="allcheck(this.checked);">전체 선택<br>
		
		<input type="checkbox" name="chk" value="30000"><b>Java</b><br>
		<input type="checkbox" name="chk" value="25000"><b>Oracle</b><br>
		<input type="checkbox" name="chk" value="20000"><b>JavaScript</b><br>
		
		<input type="button" value="확인" id="confirm"><br>
		<span>선택한 책 가격</span>
		<div id="result"></div>
	</fieldset>

</body>
</html>

체크박스가 하나도 선택되지 않았을경우 하나 이상 선택해 주세요라는 메세지를 출력시킵니다.

$(function(){
	$("#confirm").click(function(){
		$("#result").empty();
		
		//유효값처리
		if($("input[name=chk]:checked").length == 0){
			alert("하나 이상 선택해 주세요");
		}else{
			var total = 0;
			$("input[name=chk]:checked").each(function(i){
				//var chk = $(this);
				var chk = $("input[name=chk]:checked").eq(i);
				var book = chk.next().text();
				var price = chk.val();
				
				$("#result").append(book + " : " + price + "<br>");
				total += parseInt(price);
			});
			$("#result").append("총 : " + total);
		}
	});
});

만약 하나 이상 선택되어있다면 각 책의 이름과 가격이 나오고 가격의 총합을 계산해줍니다.

가격은 checkbox의 value입니다.

$(function(){
	$("input[name=chk]").click(function(){
		if ($("input[name=chk]").length == $("input[name=chk]:checked").length) {
			$("input[name=all]").prop("checked",true);
		}else{
			$("input[name=all]").prop("checked",false);
		}
	});
});

이 함수는 전체선택버튼이 true가 되면 나머지 checkbox 모두 true가 되고 전체선택 checkbox가 false가 되면 나머지 checkbox 모드 false가 되는 함수입니다.

function allcheck(bool){
	$("input[name=chk]").each(function(){
		// .attr : html의 속성(attrubute)
		// .prop : javascript의 속성(property)
		$(this).prop("checked", bool);
	})
}

전체선택을 누르지 않아도 모든checkbox가 true이면 전체선택 checkbox도 true가 됩니다.

또한 모두 true값이었다가 하나만 false가 되어도 전체 선택 checkbox도 false가 됩니다.

728x90

'JS 관련 > JQuery' 카테고리의 다른 글

[jQuery] add(), is() (0)	2022.02.15
[jQuery] find(), children(), parent(), next() (0)	2022.02.14
[jQuery] submit 활용해보기 (0)	2022.02.11
[jQeury] val()(value값 가져오기) (0)	2022.02.10
[jQeury] 제이쿼리 연습! (선택자 / hide, slideup 등) (0)	2022.02.09

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바