'jquery 셀럭터'에 해당되는 글 1건

[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 여러개로 놓여져서...


링크로 남겨둡니다. ㅠㅠ 


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


테스트 화면으로 이동하기


전체 테스트 코드


블로그 이미지

미나미나미

,