연달아서 하나더 올립니다.
저도 공부 차원에서 val 관련 document 를 가지고 공부 하고 ... 참 웃긴다 싶어서 올려요.
예전에 맛보았던 코딩의 재미를 좀 느낄수 있군요.
원래 document api 의 여러 예제를 하나의 html 로 묶었습니다.
아래 예제중 여러 input tag의 값을 한방에 배열로 설정하는 에제를 보시면.... 좀 씁쓸 하실걸요...
<!DOCTYPE html>
<!--
// http://api.jquery.com/val
$('select.foo option:selected').val(); // get the value from a dropdown select
$('select.foo').val(); // get the value from a dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
-->
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<style>
.red { color:red; }
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="scripts/jquery.1.3.2.min.js"></script>
</head>
<body>
<!----------- test ----------------->
<div id="div001"><p></p></div> // 나중에 $("#div001 p") 이런 식으로 꼭 집어 해당 p tag 를 선택 가능 한다.
// 사실 이런 기능에 뻑 간다...
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || []; // 재미 있는 표현 이다.
// $("#multiple").val() 값이 null 이거나 false 이면 기본 배열로 초기화 시킨다.
$("#div001 p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", ")); // 이것도 재미 있는 함수.... 배열의 멤버를 주어진 join 문자열로 연결하여 하나의 string 으로 리턴 해 준다.
}
$("select").change(displayVals); // select tag 의 change event handler 의 설정을 이렇게 해 주는 구나
displayVals();
</script>
<!----------- test ----------------->
<input type="text" value="some text"/>
<p id="p01"></p>
<script>
$("input").keyup(function () { // 이거 보면서 쓰러지는 줄 알았다..... 그동안 keyup event 관련된 삽질이 너무 안스럽다.
var value = $(this).val();
$("#p01").text(value);
}).keyup();
</script>
<!----------- test ----------------->
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input name="btnval01" type="text" value="click a button" />
<script>
$("button").click(function () {
var text = $(this).text();
$("input[name=btnval01]").val(text);
});
</script>
<!----------- test ----------------->
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
<p id="p002">tstx</p>
<script>
$("#p002").css("cursor", "pointer");
$("#p002").click(function () {
$("#single").val("Single2"); // select option 값을 선택 해 준다.
$("#multiple").val(["Multiple2", "Multiple3"]); // select option 값을 선택 해 준다.
$("input").val(["check1","check2", "radio1" ]); // 인생 한방이다... 여러 input 값을 순차적으로 선택 해 버린다.
// 이런것을 보면 javascript 가 규칙이 없는 언어 같기도 하고,,,, 인공지능 언어 같기도...
});
</script>
</body>
</html>