Radio button already present in the HTML code
radio button 을 선택하거나 해제하기 위해 <input>
element에서 checked
attribute 를 사용합니다. 만약 radio 버튼이 선택되면 같은 그룹안의 다른 radio 버튼들은 자동적으로 해제 됩니다. (한 그룹안에서는 오직 한개만의 radio 버튼이 선택될 수 있습니다.)
attr ("checked", "checked") method는 <input> element 상에서 사용되어 지는데요, radio 버튼을 선택할 때 사용합니다. (그러면 그 그룹안의 다른 radio 버튼은 해제 됩니다.) 그리고 attr ("checked", "") method 는 radio 버튼을 해제할 때 사용됩니다.
attr ("checked") method는 checked attribute 의 값을 retrieve 하는데 사용되어 집니다. return 값은 jQuery 의 버전에 따라 다른데요. jQuery 1.5 에서는 버튼이 선택되면 true가 반환되고 나머지는 false가 반환됩니다. jQuery 1.6 에서는 선택되면 "checked"가 그렇지 않으면 undefined가 반환됩니다.
Select the "2 rooms" radio button
$("input#id2").attr ("checked", "checked");
Deselect the "2 rooms" radio button
$("input#id2").attr ("checked", "");
Is the "2 rooms" radio button selected?
alert ($("input#id2").attr ("checked"));
// true / "checked" (selected), false / undefined (not selected)
아래 예제에서는 위에서 언급된 메소드들을 사용했습니다.
Selecting and deselecting a radio button
<!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 the number of rooms: </span>
<div data-role=controlgroup>
<label for=id1> 1 </label>
<input type=radio id=id1 name=rooms />
<label for=id2> 2 </label>
<input type=radio id=id2 name=rooms />
<label for=id3> 3 </label>
<input type=radio id=id3 name=rooms />
<label for=id4> 4 </label>
<input type=radio id=id4 name=rooms />
<label for=id5> 5 </label>
<input type=radio id=id5 name=rooms />
</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>
|
|
tistory493_01.html
Radio button dynamically created
attr
("checked") 와 attr
("checked", "checked" / "")
methods 들은 radio 버튼에 값을 할당하거나 그 값을 retrieve 할 때 사용합니다. 그리고 checkboxradio
("refresh") method 로 refresh 할 수 있습니다.
jQuery 에 의해 다이나믹하게 생성된 여러개의 radio 버튼이 있다고 가정합시다. checkboxradiocreate event 에서 2 rooms를 선택할 겁니다.
Select "2 rooms" 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 the number of rooms: </span>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<div data-role=controlgroup>";
html += "<label for=id1> 1 </label>";
html += "<input type=radio id=id1 name=rooms />";
html += "<label for=id2> 2 </label>";
html += "<input type=radio id=id2 name=rooms />";
html += "<label for=id3> 3 </label>";
html += "<input type=radio id=id3 name=rooms />";
html += "<label for=id4> 4 </label>";
html += "<input type=radio id=id4 name=rooms />";
html += "<label for=id5> 5 </label>";
html += "<input type=radio id=id5 name=rooms />";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
$("#id2").bind ("checkboxradiocreate", function (event)
{
$(this).attr ("checked", "checked").checkboxradio ("refresh");
});
</script>
|
|
여기서는 checkboxradio
("refresh") method 가 필요한데요. radio 버튼이 window 가 생성된 다음에 할당됐기 때문입니다. (checkboxradiocreate
event 에서 생성됐죠). 생성 되기도 전에 change 하면 아무 소용 없겠죠. 그리고 이런 경우 Firebug 에서 보면 jQuery error 를 보실 수 있습니다. 그래서 refresh 해 줄 필요가 있습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
|---|---|
| Radio 버튼 생성 예제들... (0) | 2012.12.03 |
| radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| 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 |