Checkbox already present in the HTML
checkbox를 select 하거나 deselect 하는 것을 관리하기 위해 checkbox 가 있는 <input>
element 에 checked
attribute 를 사용했습니다.
<input> element에서 사용하는 attr ("checked", "checked") method 는 checkbox를 select 하는데 사용됩니다. attr ("checked", "") method는 checkbox를 deselect 하는데 사용합니다.
attr ("checked") method는 checked attribute 의 값을 retrieve 하는데 사용됩니다. return 값은 jQuery 의 버전에 따라 다른데요. jQuery 1.5에서는 box가 체크돼 있으면 값이 true 가 될겁니다. 체크돼 있지 않으면 false 가 되겠죠. jQuery 1.6 는 체크돼 있으면 값이 "checked"가 됩니다. 체크돼 있지 않으면 undefined가 되구요.
Check the "2 bedrooms" checkbox
$("input#id2").attr ("checked", "checked");
Uncheck the "2 bedrooms" checkbox
$("input#id2").attr ("checked", "");
Is the "2 bedrooms" checkbox checked?
alert ($("input#id2").attr ("checked"));
// true / "checked" (if checked), false / undefined (if unchecked)
아래 예제에서는 위의 예제들을 활용하는 방법을 보여줍니다.
Selecting and deselecting a checkbox
<!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>
$("#id2").attr ("checked", "checked");
alert ($("#id2").attr ("checked")); // Displays true or checked
alert ($("#id3").attr ("checked")); // Displays false or undefined
</script>
|
|
tistory484_01.htmlCheckbox dynamically created
attr
("checked") and attr
("checked", "checked" / "")
methods 들은 체크박스에 값을 할당하거나 retrieve 할 때 사용됩니다. 체크박스를 refresh 할 때는 checkboxradio
("refresh") method 를 사용합니다.
jQuery 로 여러개의 체크박스를 생성한 경우를 가정해 봅시다. checkboxradiocreate event 에서 2 bedrooms and 3 bedrooms 를 체크하고 싶습니다.
Check the "2 bedrooms" and "3 bedrooms" in the list
<!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>
</div>
</body>
</html>
<script>
var html = "";
html += "<div data-role=controlgroup>";
html += "<label for=id1> 1 bedroom </label>";
html += "<input type=checkbox id=id1 name=p1 />";
html += "<label for=id2> 2 bedrooms </label>";
html += "<input type=checkbox id=id2 name=p2 />";
html += "<label for=id3> 3 bedrooms </label>";
html += "<input type=checkbox id=id3 name=p3 />";
html += "<label for=id4> 4 bedrooms </label>";
html += "<input type=checkbox id=id4 name=p4 />";
html += "<label for=id5> 5 bedrooms </label>";
html += "<input type=checkbox id=id5 name=p5 />";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
$("input").bind ("checkboxradiocreate", function (event)
{
if (this.id == "id2" || this.id == "id3")
$(this).attr ("checked", "checked").checkboxradio ("refresh");
});
</script>
|
|
여기서는 checkboxradio
("refresh") method를 사용해야 합니다. 왜냐하면 checkbox는 생성되고 나서 affect 될 수 있기 때문이죠. (예를 들어 checkboxradiocreate event 같은). 만약 생성되기 전에 만들면 (이벤트 이전이 되겠죠) 그러면 이 메소드 call 은 소용없습니다. 그리고 Firebug에서 보시면 jQuery 에러를 만들어 냅니다. 왜냐하면 non-authorized context 안에서 이 메소드가 사용되기 때문이죠.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |
|---|---|
| 체크 박스 생성 예제들 (0) | 2012.11.27 |
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |
| selection list 관련 예제들 (0) | 2012.11.18 |
| selectiion list customize 하기 (0) | 2012.11.17 |