💻 val() 함수의 사용
웹페이지를 제작할 때 사용자에게 아이디와 비밀번호를 요구한 이후, 아이디와 비밀번호가 제대로 입력되지 않았을 경우 재입력을 요구하는 경우가 있다. 이 때 val 함수를 통해 사용자가 입력한 아이디와 비밀번호의 값을 확인하여 조건에 맞게 결과를 리턴해준다.
$('셀렉터').val('내용');
val함수의 사용법과 예제를 알아보자
⭐️ input
🔥 입력값 조회하기
파라미터 없이 함수를 호출하면 현재 설정되어 있는 입력값을 리턴받게 된다.
let username = $('#userId').val(); let userpw = $('#userPw').val();
🔥 입력값 설정하기
파라미터를 통해 입력값을 설정할 수도 있다.
$('#userId').val('손흥민'); $('#userpw').val('soccer');
🔥 포커스 함수
포커스 함수는 입력 요소에 포커스를 강제로 설정해주는 함수이다. 포커스 함수를 통해 사용자의 편의성을 증가시켜준다.
$('#userId).focus();
🔥 입력값 검사 패턴
이제 가장 중요한 입력값 검사 패턴이다. 해당 패턴을 통해 사용자로부터 아이디와 비밀번호를 입력받았는지 확인하고, 사용자가 값을 입력하지 않았으면 사용자에게 alert창으로 재입력이 필요함을 안내하고, focus함수를 통해 해당 input박스 안으로 포커스를 설정해준다.
// 사용자가 input박스에 입력한 아이디값을 id로 받음 let id = $('#userId').val(); // 아이디변수에 값이 할당되어있지 않을 때 = 사용자가 값을 입력 안했을 때 if(!id){ alert('아이디를 입력하세요'); // 아이디 입력해 달라는 경고창 호출 $('#userId').focus(); // id input 박스에 포커스 강제 return false; // 입력중단 }
⭐️ select
🔥 val() 함수를 이용하여 선택 값 조회하기
만약 option 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에, 값이 필요없는 항목이라도 반드시 공백으로 value를 지정해주자. 값이 필요없는 항목은 사용자의 편의를 위해 '선택하세요' 와 같은 예시 문구이다.
<select id="sports"> <option id="">선택하세요</option> <option value='soccer'>축구</option> <option value='baseball'>야구</option> <option value='basketball'>농구</option> </select>
해당 드롭다운들 역시 input과 같이 val()함수를 이용하여 option요소의 값을 가져온다.
// value 변수에 사용자가 선택한 option 값을 가져옴 let value = $('#sports').val();
🔥 선택위치 조회하기
드롭다운에 포함된 option태그 중에서 선택항목의 위치를 검사하고자 할 때는 ":selected" 셀렉터를 이용하여 선택된 요소에 접근하고, index()로 해당 option태그의 인덱스를 불러준다.
$('#sports > option:selected').index();
⭐️ radio (단일선택)
🔥 선택 값 조회하기
여러개의 항목 중에서 선택된 항목을 찾을때는 ":checked"셀렉터를 이용하여 선택된 요소에 접근한다. 라디오 버튼은 여러 개의 항목 중 단 하나만 선택할 수 있으므로, :checked 요소 역시 단일요소이다.
<label><input type='radio' name='subject' value="html">HTML</label> <label><input type='radio' name='subject' value="css">CSS</label> <label><input type='radio' name='subject' value="javascript">Javascript</label>
let value = $('.subject:checked').val();
⭐️ checkbox (다중선택)
🔥 선택 값 조회하기
체크박스는 여러 개의 항목 중에서 복수 선택이 가능한 요소이다. 그렇기 때문에 접근한 요소는 유사 배열의 형태가 된다. 접근 선택자는 radio와 마찬가지로 ":checked"이다.
<form id="myform"> <label><input type='checkbox' class='hobby' value="soccer">축구</label> <label><input type='checkbox' class='hobby' value="basketball">농구</label> <label><input type='checkbox' class='hobby' value="baseball">야구</label> <button type='submit'>입력값 확인</button> </form>
let value = $('.hobby:checked');
checkbox는 중복 선택이 가능하므로 value는 유사 배열의 형태로 저장된다. 그렇기 때문에 val()로 특정 값을 지정하여 변수에 저장할 수 없다. 해당 변수의 값을 받아보기 위해선 for문이나, each()함수를 이용해야한다.
⭐️ 반복처리 - each()
HTML 요소에 대한 반복처리를 수행하는 경우, 배열의 각 요소에 대한 index 값을 사용하여 원소에 접근해야 한다. 인덱스 별로 세세한 배열의 조작을 필요로 할 땐 for문을 사용하면 되지만, 단순히 배열 자체를 나열하고 싶을 때는 each함수가 훨씬 간단하다.
$.each() 함수는 HTML 요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달한다.
// list라는 값의 클래스를 가진 HTML요소들을 elm변수에 담아준다 let elm = $('.list:checked); // 같은 배열을 for문으로 작성했을 때) for(let i = 0; i < elm.length; i++){ // value 변수 안에 elm유사배열의 값들을 반복당 한 번씩 담아줌 let value = $(elm[i].val()); } $.each(elm, function(index, item){ // index : 배열의 위치 // item : 배열의 각 원소 let value = $(item).val(); })
