[jQuery] input 박스 같은이름 배열형태로 넘기는 경우체크
input에서 text, password는 같은 형태로 처리를 합니다.
여기선 php로 배열 형태로 넘길때 name 값을 같게하면서 []를 사용하는 경우의 예가 있습니다.
예전 jQuery에선 [1] 형태로 사용했는데 현재 버전은 eq(1) 형태로 사용합니다.
인덱스의 사용 방법이 변경 되었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery test </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<input type="text" data="txt1" name="parm1" value="0"/><br/>
<input type="text" data="txt2" name="pam[]" value="1"/><br/>
<input type="text" data="txt3" name="pam[]" value="2"/><br/>
<input type="text" data="txt4" name="pam[]" value="3"/><br/>
<input type="password" data-name="test2" class="pwd" value="4"/>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
// 아래처럼 다른 속성을 조건으로 줘도 된다 class 까지도 말이다
console.log( '속성의 이름으로 조회: ', $("input[data='txt1']").val() );
console.log( 'PHP로 배열 형태로 넘길때: ', $("input[name='pam[]']").eq(2).val() );
// 키보드 입력 감지
$("input[data='txt2']").keyup( function() {
console.log('키업 감지:', this.name, ' 값:', this.value );
});
// 일치하는 '검색어'
$("input[name='txt']");
// 시작하는 '검색어%'
$("input[name^='txt']");
// 포함된 '%검색어%'
$("input[name*='txt']");
// 끝나는 '%검색어'
$("input[name$='txt']");
console.log("\n");
// data값은 나오지 않는다 - 같은 name을 가진것을 가져온다
$("input[name^='pam']").each( function(index, item) {
console.log( index, item.value, ' name:', item.name, ' ', item.data );
});
});
</script>
같은 이름에 대해서 가져오는 DB의 LIKE 같은 형태의 라고 생각하면 되는 것에 예가 있습니다.
그리고 여러개를 가져와서 처리 해야 할때 each 안쪽에 익명함수의 파라미터 참고하여 사용하면 됩니다.
* 참고할것
[jQuery] select 박스 값변경 및 index 가져오기와 삭제 방법
