<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src ="http://code.jquery.com/jquery-latest.js"></script>
<title>.attr()</title>
<style>
p { margin: 20px 0 0 }
b { color: red }
</style>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me !</label>
<p></p>
<script>
//"input"엘리먼트가 변경될때마다 호출되는 함수
$("input").change(function()
{
var $input = $(this);
$("p").html
(
//this의 "checked"라는 속성의 값을 출력
".attr('checked': <b>" + $input.attr('checked') + "</b><br/>"
//this의 "checked"속성에 직접 접근하여 값을 가져옴
+ ".prop('checked'): <b>" + $input.prop('checked') + "</b><br/>"
+ ".is(':checked'): <b>" + $input.is(':checked')
) + "</b>";
}).change();
</script>
<br/><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="mulit">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple</option>
</select><br/>
<span></span>
<script type="text/javascript">
function displayVals()
{
//val()을 통해 지정한 엘리먼트의 value값을 설정
var singleValues = $("#single").val();
var multiValues = $("#mulit").val() || [];
$("span").html
(
"<b>Single: </b>" + singleValues +
"<br/><b>Multiple: </b>" + multiValues
);
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>
14-2_Attr_prop()_val().html'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 팝업창에서 스크롤바 사용하기. (0) | 2016.12.20 |
|---|---|
| [JavaScript] 14-3_Filtering.html (0) | 2016.12.12 |
| [JavaScript]_Attr_toggleClass().html (0) | 2016.12.12 |
| [JavaScript] 14-2_Attr_removeClass().html (0) | 2016.12.12 |
| [JavaScript] 14-2_Attr_hasCalss().html (0) | 2016.12.12 |