개발/jquery

체크박스 유효성 검증

issac 2021. 2. 23. 16:49

정말 간단한 소스임에도 javascript 및 jQuery 기초가 없다보니 너무 헤맸다. 

id값을 가져와서 체크가 되었는지 안되었는지 확인하고 

체크된 갯수가 2개가 아니면 넘어가지 못하게 만들면 되는건데

애초에 id값을 가져오는것 자체를 하지를 못하니.....

역시 남의 코드 갖고와서 수정하다보면 이렇게 헤매고 한참걸리나보다. 

	<!-- 페이지 이동소스 -->
	<script>
		$(document).ready(function(){
			//회원가입2
			$('#agree').click(function(){
				<!-- 유효성 검증 -->
				var chk1 = document.getElementById('chk1');
				var chk2 = document.getElementById('chk2');
				var flag = false;
				var num = 0;
				if($('#chk1').is(':checked')==true){
					num+=1;
				}
				if($('#chk2').is(':checked')==true){
					num+=1;
				}
				if(num == 2){
					flag = true;
				}
				if(flag){
					$('.showMenu').empty();
					$('.showMenu').load('/member/userJoin2');
					return false;
				}else{
					alert('필수 약관에 동의해주세요.');
				}
			});
		});
	</script>
	
	<!-- 체크박스 확인 -->
	<script>
		function allCheck() {
			$("[name=check2]").prop("checked", true);
		}// 모두 체크하기

		function oneCheck(a) {
			var allChkBox = $("[name=check1]");
			var chkBoxName = $(a).attr("name");

			if ($(a).prop("checked")) {
				checkBoxLength = $("[name=" + chkBoxName + "]").length;
				//전체체크박스 수(모두동의하기 체크박스 제외)
				checkedLength = $("[name=" + chkBoxName + "]:checked").length;
				//체크된 체크박스 수 
				if (checkBoxLength == checkedLength) {
					allChkBox.prop("checked", true);
					//전체체크박스수 == 체크된 체크박스 수 같다면 모두체크
				} else {
					allChkBox.prop("checked", false);
				}
			} else {
				allChkBox.prop("checked", false);
			}
		}

		$(function() {
			$("[name=check1]").click(function() {
				allCheck(this);
				//모두동의하기 체크박스 클릭시
			});
			
			$("[name=check2]").each(function() {
				$(this).click(function() {
					oneCheck(this);
				});
			});
		});

	</script>