제이쿼리 - 기초(4)

$("form input[name=agree]").click(function(){
		if($(this).is(":checked")) {
			$(".btnSend").prop("disabled", false);
		} else {
			$(".btnSend").prop("disabled", true);
		}
		
	});

name이 agree인 input박스는 type이 checkbox 이다. (약관 동의 용으로 쓸 거임)

즉 이 체크 박스를 눌렀을때의 이벤트를 설정 하는건데

if로 체크박스가 체크 되었을때와 체크 되지 않았을때의 상황을 준비 할 것이다.

 

체크박스가 체크 되어 있다면 => .btnSend(보내기 버튼)의 속성을 보이게 바꾼다. (prop는 속성을 변경하게 해줌)

체크박스가 체크 되어 있지 않다면 => .btnSend의 disabled 속성을 true로 바꿔서 버튼을 비활성화 한다.

 

$(function(){
	$(".btnSend").click(function(){
		var hak = $("form input[name=hak]").val();
		var name = $("form input[name=name]").val();
		var gender = $(":radio[name=gender]:checked").val();
		
		// 체크 박스 선택 유무와 상관없이 무조건 체크박스의 벨류값 yes를 반환함
		//var receiveMail = $("form input[name=receiveMail]").val();
		var receiveMail = "no";
		if($("form input[name=receiveMail]").is(":checked")){
			receiveMail = $("form input[name=receiveMail]").val();
		}
		
		var hobbys = $("form input[name=hobby]:checked");
		var h = "";
		/*
		for(var i=0; i<hobbys.length; i++){
			h += $(hobbys[i]).val() + ",";
		}
		if(h.length > 0) {
			
			h = h.substr(0, h.length-1);
		}
		*/
		var hh = [];
		// hobbys.each((index, item) => {hh.push(item.value); } );
		$(hobbys).each(function(){
			hh.push($(this).val());
		});
		h = hh.join();
		
		
		
		
		var result;
		result = "<p>학번 : " + hak + "</p>";
		result += "<p>이름 : " + name + "</p>";
		result += "<p>성별 : " + gender + "</p>";
		result += "<p>메일 수신 여부 : " + receiveMail + "</p>";
		result += "<p>취미 : " +  h + "</p>";
		
		$(".result-box").html(result);
	});
	
});

보내기 버튼을 클릭 했을때의 이벤트 이다.

먼저 변수를 만들어서 각 input 박스의 값들을 담는다. val() 메소드 사용

 

var gender = $(":radio[name=gender]:checked").val(); 같은 경우는 radio이기 때문에

(:radio : type 속성값이 "radio"인 요소를 모두 선택한다. )

그리고 뒤에 :checked를 붙여주면 radio 중에서 체크된 애들 값을 다 가져온다.

이 경우에는 체크 박스의 경우의 수를 2가지 밖에 안두었기 때문에 선택된 하나의 radio의 값만 가져온다.

 

receiveMail같은 경우는 if문을 통해서 값을 가져올지 말지를 결정한다.

 

hobbys는 여러개 체크가 가능하기 때문에 먼저 변수에 체크된 애들을 모두 담고

따로 배열 변수를 만들어서 반복문을 통해서 배열 변수에 값을 담아야 한다.

반복문은 for문, each문을 사용하면 된다.

 

-- 특정 <input>요소를 선택할 수 있는 선택자
  :button : type 속성값이 "button"인 요소를 모두 선택한다. $(":button")
  :checkbox : type 속성값이 "checkbox"인 요소를 모두 선택한다. $(":checkbox")
  :file : type 속성값이 "file"인 요소를 모두 선택한다. $(":file")
  :image : type 속성값이 "image"인 요소를 모두 선택한다. $(":image")
  :password : type 속성값이 "password"인 요소를 모두 선택한다. $(":password")
  :radio : type 속성값이 "radio"인 요소를 모두 선택한다. $(":radio")
  :reset : type 속성값이 "reset"인 요소를 모두 선택한다. $(":reset")
  :submit : type 속성값이 "submit"인 요소를 모두 선택한다. $(":submit")
  :text : type 속성값이 "text"인 요소를 모두 선택한다. $(":text")
  :input : <input>, <textarea>, <select>, <button> 요소를 모두 선택한다. $(":input")
  :checked : type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택한다. $(":checked")
  :selected : <option>요소 중에서 선택된 요소를 모두 선택한다. $(":selected")
  :focus : 현재 포커스가 가지고 있는 요소를 선택한다. $(":focus")
  :disabled : 비 활성화 되어 있는 요소를 모두 선택한다. $(":disabled")
  :enabled : 활성화 되어 있는 요소를 모두 선택한다. $(":enabled")

 

$(function(){
	$("#chkAll").click(function(){
		/*
		if($(this).is(":checked")) {
			$("input[name=nums]").prop("checked", true);
		} else {
			$("input[name=nums]").prop("checked", false);
		}
		*/
		$("input[name=nums]").prop("checked", $(this).is(":checked"));
	});
	
	$("#btnDeleteList").click(function(){
		var cnt = $("input[name=nums]:checked").length;
		if(cnt === 0) {
			alert("삭제할 게시물을 먼저 선택 하세요");
			return false;
		}
		
		// 새로운 유사 배열을 반환
		var n = $("input[name=nums]:checked").map(function(){
			return $(this).val();
		})
		.get() // 선택한 모든 요소를 배열로 반환
		.join(",");
		
		console.log(n);
	});

	
});

게시판 같은데서 모든 항목 체크 버튼을 클릭하면 하위 체크 항목들 선택하게 하는 기능과

삭제 버튼을 눌렀을시에 체크된 애들만 구별할 수 있는 기능 2가지 이다.

 

먼저 #chkAll 의 체크박스를 눌렀을때 모든 체크 박스를 클릭 하게 만드는 기능이다.

prop() 메소드를 사용해서 특정 이름을 가지고 있는 태그들의 속성을 전부 :checked로 만드는 것

 

그리고 삭제 버튼을 눌렀을시에 선택된 항목들의 리스트를 보여주게 하는 기능이다.

먼저 변수하나에 체크된 애들을 넣고 .length() 메소드를 이용해서 길이를 구한다.

만약 길이가 0 이면 체크된게 하나도 없는것이니 false를 반환한다.

 

만약 길이가 1이라도 있다면 다음으로 넘어가서

새로운 배열을 유사 배열을 반환한다.

새로운 변수에 map() 메소드를 사용하는 이유는 주어진 배열을 마음대로 다시 사용 할 수 있기 때문이다.

get() 메소드를 이용해서 값을 가져오고 join() 메소드를 이용해서 , 콤마로 구분을 짓는다.

그리고 그걸 console.log로 개발자 도구 콘솔창으로 띄운다.

 

$(function(){
	// $("#selectEmail").val("naver.com");
	$("#selectEmail option:eq(1)").prop("selected", true);
	
	$("#selectEmail").change(function(){
		if(! $(this).val())	return false;
		alert($(this).val());
	});
	
	$(".btnAdd").click(function(){
		var s = $("#inputs").val().trim();
		if(! s) return false;
		
		$("#subject").append("<option value='"+s+"'>"+s+"</option>");
		$("#inputs").val("");
		$("#inputs").focus();
		
	});
	
	$(".btnSelect").click(function(){
		var s = $("#subject").val(); // 선택 항목 가져오기
		alert(s);
	});
	
	$(".btnSelectDelete").click(function(){
		var idx = $("#subject option").index($("#subject option:selected"));
		if(idx === -1) {
			return false;
		}
		$("#subject option:selected").remove();
	});
	
	$(".btnAllDelete").click(function(){
		$("#subject option").remove();
	});
});

목록 선택박스에서 선택한 항목의 값을 가져 올 수 있다.

change() 메소드를 이용하면 셀렉트 박스에서 값이 변경이 된다면 감지 할 수 있음.

 

.btnAdd를 눌렀을때에는 #inputs 의 값을 선택박스에 새로 등록 할 수 있다.

append()로 html태그와 넣을 변수 값을 추가한다.

 

선택 박스에서 현재 선택된 박스의 값을 지울 수 있고

모든 값들을 지울 수 있다.

이 경우에는 index() 메소드를 사용해서 선택된 놈을 찾아서 remove()로 지운다.

 

모두 지울 경우에는 option 자체를 remove() 메소드로 지우면 된다.

 

$(function() {
	var elements = createFormElement();
	$("#boxLayout").html(elements);
	function createFormElement() {
		var gender = "남자";
		var label;
		var input;
		
		var $layout = $("<div>");
		
		label = $("<span>", {html:"이름 : "});
		input = $("<input>", {type:"text", name:"name", id:"name"});
		$layout.append($("<p>").append(label).append(input));
		
		label = $("<span>", {html:"나이 : "});
		input = $("<input>", {type:"text", name:"age", id:"age"});
		$layout.append($("<p>").append(label).append(input));
		
		var $p = $("<p>");
		label = $("<span>", {html:"성별 : "});
		$p.append(label);
		
		label = $("<span>", {html:"남자 "});
		input = $("<input>", {type:"radio", name:"gender", id:"gender", value:"남자"});
		$p.append(label).append(input);
		
		label = $("<span>", {html:"여자 "});
		input = $("<input>", {type:"radio", name:"gender", id:"gender", value:"여자", checked:true});
		$p.append(label).append(input);
		
		$layout.append($p);
		
		return $layout;
	}
});

html에 폼 양식을 추가 할 수 있다.