[jquery] 자바스크립트 모든 input값 가져오기 (input selector)



항상 우리는 이런 코드를 많이 쓰죠!
(나만...그런가요..하하하)


이렇게 input 하나가 있을 때는 id값으로 접근하여서
간편하게 저런 식으로 값을 가져오거나 값을 주는 방식으로 주로 쓰이죠


<body>
<input id="simple_input" type="text" name="simple_input_name" value="simple_input_value">
<button id="call_input_text" type="button"/> input value 가져오기</button>
<script>
$("#call_input_text").click(function () {
alert($("#simple_input").val());
});
</script>
</body>



그러면 input 여러개 있으면... 어떡하죠.....




<input id="simple_input" type="text" name="simple_input_name" value="simple_input_value">
<p id="first_p">
<input id="text1_id" type="text" name="text1_name" value="text1_value">
<input id="text2_id" type="text" name="text2_name" value="text2_value">
<input id="text3_id" type="text" name="text3_name" value="text3_value">
<input id="text4_id" type="text" name="text4_name" value="text4_value">
<input id="text5_id" type="text" name="text5_name" value="text5_value">
<input id="text6_id" type="text" name="text6_name" value="text6_value">
<button id="call_input_text" type="button" /> text value 가져오기</button>
</p>
<p id="second_p">
<input id="number1_id" type="number" name="number1_name" value=1>
<input id="number2_id" type="number" name="number2_name" value=2>
<input id="number3_id" type="number" name="number3_name" value=3>
<input id="number4_id" type="number" name="number4_name" value=4>
<input id="number5_id" type="number" name="number5_name" value=5>
<input id="number6_id" type="number" name="number6_name" value=6>
<button id="call_input_number" type="button" /> number value 가져오기</button>
</p>
<p id="third_p">
<input id="radio1_id" type="radio" name="radio_name" value=1 checked>
<input id="radio2_id" type="radio" name="radio_name" value=2>
<input id="radio3_id" type="radio" name="radio_name" value=3>
<input id="radio4_id" type="radio" name="radio_name" value=4>
<input id="radio5_id" type="radio" name="radio_name" value=5>
<input id="radio6s_id" type="radio" name="radio_name" value=6>
<button id="call_input_radio" type="button" /> radio value 가져오기</button>
</p>
<p id="four_p">
<input id="checkbox1_id" type="checkbox" name="checkbox_name" value=1 checked>
<input id="checkbox2_id" type="checkbox" name="checkbox_name" value=2>
<input id="checkbox3_id" type="checkbox" name="checkbox_name" value=3>
<input id="checkbox4_id" type="checkbox" name="checkbox_name" value=4>
<input id="checkbox5_id" type="checkbox" name="checkbox_name" value=5>
<input id="checkbox6s_id" type="checkbox" name="checkbox_name" value=6>
<button id="call_input_checkbox" type="button" /> checkbox value 가져오기</button>
</p>





그럴 때 이 방법을 써봐야될 것 같아요! selector 

자, 그러면 첫번째, p 태그들의 값들을 가져와 보도록 하겠습니다.


$("#call_input_text").click(function () {
var get_input = $("#first_p input[type=text]");
console.log(get_input);
console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
//그렇다면, object임으로 key : value 구조다.
$.each(get_input, function (index, value) {
console.log('인덱스값' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});


첫번째 p 태그 안에는 call_input_text를 버튼을 누르면 


결과화면을 보시게되면 p태그 안에는 input type=text와 관련하여 정보를 확인할 수 있습니다.


그리고 , typeof를 비교 후 왜 Array.isArray를 비교를 왜 하셨는지 궁금하시다면,

아래의 링크를 봐주시면 감사하겠습니다.

[javascript] 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유



결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)


첫번째 p 태그 안에는 input type=text들의 정보를 출력해주고, 

그 다음 get_input에 관한 정보를 확인하여,

그 안에는 key에 관하여 value를 통해서 input에 id , name, value를 확인할 수 있습니다. 





두 번째 p 태그 안에는 call_input_number를 버튼을 누르면 


 p태그 안에는 input type=number와 관련하여 정보를 확인할 수 있습니다.

$("#call_input_number").click(function () {
var get_input = $("#second_p input[type=number]");
console.log(get_input);
console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
//그렇다면, object임으로 key : value 구조다.
$.each(get_input, function (index, value) {
console.log('인덱스값' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});


결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)






세번째, 네번쨰에서는 선택된 애들만 가져오는 부분으로 진행보도록 하겠습니다.


모든 부분이 필요하신분은 아래 전체 테스트 코드에서 주석을 푸시고 사용하시면 됩니다.


세번째 p 태그에서는 input type 라디오인 경우 

하나만 체크가 가능하 구조로 지금 만들어 졌습니다. 

세번째 p 태그 안에 radio value 가져오기를 누르시면 선택하신 라디오에 정보를 출력합니다.



$("#call_input_radio").click(function () {
// var get_input = $("#third_p input[type=radio]");
// console.log(get_input);
// console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
// console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
// //그렇다면, object임으로 key : value 구조다.
// $.each(get_input, function (index, value) {
// console.log('인덱스값 ' + index);
// console.log(value);
// console.log('id =' + $(value).attr("id"));
// console.log('name =' + $(value).attr("name"));
// console.log('value =' + $(value).val());
// //console.log($(value).prop("checked" , true)); // radio 임으로 체크의 유무 확인이 필요한 경우
// });
var get_input_checked = $("#third_p input[type=radio]:checked"); // 선택하 라디오의 정보를 가져옵니다.
console.log(get_input_checked); // 선택된 라디오들의 정보
$.each(get_input_checked, function (index, value) {
console.log('인덱스값 ' + index);
console.log(value);
console.log('id =' + $(value).attr("id")); //id
console.log('name =' + $(value).attr("name")); // name
console.log('value =' + $(value).val()); //value
});
});


결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)



네번째 p 태그에서는 input type checkbox인 경우 


여러개 체크가 가능하 구조로 지금 만들어 졌습니다. 


네번째 p 태그 안에 checkbox value 가져오기를 누르시면 

체크된 checkbox에 정보를 출력합니다.


$("#call_input_checkbox").click(function () {
// var get_input = $("#four_p input[type=checkbox]");
// console.log(get_input);
// console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
// console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
// //그렇다면, object임으로 key : value 구조다.
// $.each(get_input, function (index, value) {
// console.log('인덱스값 ' + index);
// console.log(value);
// console.log('id =' + $(value).attr("id"));
// console.log('name =' + $(value).attr("name"));
// console.log('value =' + $(value).val());
// //console.log($(value).prop("checked" , true)); // radio 임으로 체크의 유무 확인이 필요한 경우
// });
var get_input_checked = $("#four_p input[type=checkbox]:checked");
console.log(get_input_checked);
$.each(get_input_checked, function (index, value) {
console.log('인덱스값 ' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});

결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)



무슨 이유인지 모르겠지만 ... codepen 여러개로 놓여져서...


링크로 남겨둡니다. ㅠㅠ 


테스트 하실분 아래 이동하기를 눌러주세요.


테스트 화면으로 이동하기


전체 테스트 코드


블로그 이미지

미나미나미

댓글을 달아 주세요