티스토리 뷰
개요[편집]
- jQuery - HTML 요소 개수
- jQuery - input text 개수 확인
- jQuery - input 배열 수 세기
<form name='my_form'>
<input type='button' id='my_button' value='개수 세기' />
<hr>
<input type='text' name='tag' />
<input type='text' name='tag' />
<input type='text' name='tag' />
<input type='text' name='tag' />
<input type='text' name='tag' />
</form>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#my_button").click(function() {
alert($("input[name=tag]").length);
});
</script>같이 보기[편집]
[http://fruitdev.tistory.com/192]
자바스크립트로 스크립트를 만들다 보면 생각외로 종종 input 배열의 값을 컨트롤 해야 할때가 있다.
Input 배열은 동일 페이지 내에서 Input으로 정의되는 항목에 대하여 중복되는 Name이 존재할경우 배열처럼 사용이 가능하다. 보통은 Checkbox를 이용할때 많이 사용한다고 볼 수 있다.
내용이 간단하여 아래 예제만 봐도 쉽게 이해할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>Input Array</title><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> |
'jQuery' 카테고리의 다른 글
| jquery.validator 정리 (1) | 2017.05.08 |
|---|---|
| jQuery 상위 요소 가져오기(parents, closest) (0) | 2017.03.14 |
| jQuery 핵심 - 노드 다루기 (0) | 2017.03.14 |
| [jQuery] iframe 접근, 제어 (0) | 2017.03.14 |
| html5 data 속성 제어 - data() 메서드 활용 (0) | 2017.02.17 |
댓글