jQuery Mobile 은 checkbox들의 change event 를 관찰하고 있습니다. checkbox는 두가지 state 를 가지고 있습니다. (checked or not) 이 이벤트는 사용자가 checkbox를 click 했을 때 나타납니다. click event 이벤트도 있습니다. 하지만 이 click event 이벤트는 아래에서 사용되지 않습니다.
Using the change event on checkboxes
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
<script>
$(":checkbox").bind ("change", function (event)
{
alert ($(this).attr ("checked"));
});
</script>
|
|
tistory486_01.html
왜 click event는 직접적으로 사용되지 않을까요? jQuery Mobile 은 original HTML code를 transform 하는 것을 기억하세요. 그러니까 <input>
element가 아니라 ui-checkbox
CSS class가 있는 <div>
element에서 click event를 receive 하게 됩니다. 그래서 <div>
element에서 일어나는 클릭은 <input>
element 에서 change event를 유발합니다. 그리고 이 change event를 사용하구요.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |
|---|---|
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |