Language/JQuery
[JQuery] input 배열 값 가져오기
과일가게 개발자
2016. 5. 11. 11:03
반응형
자바스크립트로 스크립트를 만들다 보면 생각외로 종종 input 배열의 값을 컨트롤 해야 할때가 있다.
Input 배열은 동일 페이지 내에서 Input으로 정의되는 항목에 대하여 중복되는 Name이 존재할경우 배열처럼 사용이 가능하다. 보통은 Checkbox를 이용할때 많이 사용한다고 볼 수 있다.
내용이 간단하여 아래 예제만 봐도 쉽게 이해할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input Array</title>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 체크박스 배열 Loop
$("input[name=chk]").each(function(idx){
// 해당 체크박스의 Value 가져오기
var value = $(this).val();
var eqValue = $("input[name=chk]:eq(" + idx + ")").val() ;
console.log(value + ":" + eqValue) ;
});
// 배열의 특정순서의 Value 가져오기
var orange = $("input[name=chk]:eq(2)").val() ;
console.log(orange);
// 배열의 특정순서 Value 변경하기
$("input[name=chk]:eq(2)").val("포도") ;
var chgFruit = $("input[name=chk]:eq(2)").val() ;
console.log(chgFruit) ;
});
</script>
</head>
<body>
<input type="checkbox" name="chk" id="chk" value="바나나">바나나
<input type="checkbox" name="chk" id="chk" value="딸기">딸기
<input type="checkbox" name="chk" id="chk" value="오렌지">오렌지
</body>
</html>