[jQuery] jQuery <input> 요소 선택자, 직렬화

[jQuery] jQuery <input> 요소 선택자, 직렬화

---

✔️ <input> 요소 선택자 - ':' 를 사용

-- 특정 <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")

 

📓 예제 1

$(function(){
	//form 태그 아래의 <input> 태그만
	//$("form input").css("border", "1px solid blue");
	
	//form 태그 아래의 input 요소(<input>, <button>, <select>, <textarea> 등)
	$("form :input").css("border", "1px solid blue");
	
	$("form input[name=hak]").prop("readonly", true);
	$(".btnSend").prop("disabled", true);
	
	$("form input[name=agree]").click(function(){
		if($(this).is(":checked"))
			$(".btnSend").prop("disabled", false);
		else
			$(".btnSend").prop("disabled", true);
	});
	
});

$(function(){
	$(".btnSend").click(function(){
		let hak = $("form input[name=hak]").val();
		let name = $("form input[name=name]").val();
		
		let gender = $(":radio[name=gender]:checked").val();
		
		//일단 디폴트 no 줌 (그냥 if 가면, undefined 나올 수도 있기 때문이다.)
		let receiveMail = "no";
		if($("form input[name=receiveMail]").is(":checked")){
			receiveMail = $("form input[name=receiveMail]").val();
		}
		
		let hobbys = $("form input[name=hobby]:checked");
		let h = "";
		let hh = [];
		//순수 js : hobbys.each((index, item) => {hh.push(item.value)});
		$(hobbys).each(function(){
			hh.push($(this).val());
		});
		
		h = hh.join();
		
		let 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);
		
	});
});

 

📓 예제 2

$(function(){
	$("#chkAll").click(function(){
		$("form input[name=nums]").prop("checked", $(this).is(":checked"));
	});
	
	$("#btnDeleteList").click(function(){
		let cnt = $("input[name=nums]:checked").length;
		
		if(cnt === 0 ){
			alert("먼저 선택하세요.");
			return false;
		}
		
		alert("삭제한다.");
		
	});
});

 

 

✔️ jQuery 직렬화

-- 직렬화
  직렬화 : 폼 자료를  "a=1&b=2&c=3&d=4&e=5" 처럼 결합
 .serialize() : 입력된 모든 Element(을)를 문자열의 데이터에 serialize 한다.
 .serializeArray() : serialize 메소드와 같이 Form(이)나 Element(을)를 serialize 하여 JSON 형식의 데이터 구조로 반환 값을 돌려준다.

 

📓 예제 1

처음처럼 길게 작성할 수 있지만, form 태그가 있으면 serialize() 직렬화 하는게 편하다.

$(function(){
	$(".btnSend1").click(function(){
/* 		let hak = $("form input[name=hak]").val();
		let name = $("form input[name=name]").val();
		name = encodeURIComponent(name);
		let birth = $("form input[name=birth]").val();
		let kor = $("form input[name=kor]").val();
		let eng = $("form input[name=eng]").val();
		let mat = $("form input[name=mat]").val();
		
		let query = "hak="+hak+"&name="+name+"&birth"+birth+"&kor="+kor+"&eng="+eng+"&mat="+mat;
		alert(query); */
		
		//폼 데이터를 직렬화
		//폼 태그가 있으면 편하다~~~~~~~~~~
		let query = $("form[name=scoreForm]").serialize();
		alert(query);
		
	});
	
	
	$(".btnSend2").click(function(){
		let obj = $("form[name=scoreForm]").serializeArray();
		let query = JSON.stringify(obj);
		alert(query);
		
	});
	
	
	$("form[name=scoreForm]").submit(function(){
		let query = $(this).serialize();
		alert(query);
		
		return false; // 서버 전송 안됨
	});
		
	
});

 

📓 예제 2

- 폼 양식을 추가할 수 있다.

$(function(){
	let elements = createFormElement();
	$("#boxLayout").html(elements);
	
	function createFormElement() {
		let gender = "남자";
		let label;
		let input;
		
		let $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:"gender1", value:"남자", checked:(gender=="남자")});
		$p.append(label).append(input);
		
		label = $("<span>", {html:" 여자 "});
		input = $("<input>", {type:"radio", name:"gender", id:"gender2", value:"여자", checked:(gender=="여자")});
		$p.append(label).append(input);
		
		$layout.append($p);
		
		return $layout;
	}
});