<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<title>테스트 페이지</title>
</head>
<body>
<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>
<script>
//input 타입 text인 경우
$("#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());
});
});
$("#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());
});
});
$("#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
});
});
$("#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());
});
});
</script>
</body>
</html>
