[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 탭을 누르시면 확인 가능합니다.)
'[javascript] > [jquery]' 카테고리의 다른 글
| [jquery] 웹에디터 썸머노트(SummerNote) 단락(Paragraph) 사용기 & 커스텀 버튼 버전 (0) | 2020.08.30 |
|---|---|
| [jquery] 웹에디터 썸머노트(SummerNote) 커스텀 버튼 (0) | 2020.08.29 |
| [jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법 (0) | 2020.08.26 |
| jquery contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기 및 사용법 (0) | 2020.08.25 |
| [Jquery] JsonViewer 만들기 JsonView.js 사용법 (JsonViewer) (0) | 2019.10.21 |
미나미나미