반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Assign and retrieve the value of a checkbox



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.html



Checkbox 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>




tistory484_02.html




여기서는 checkboxradio ("refresh") method를 사용해야 합니다. 왜냐하면 checkbox는 생성되고 나서 affect 될 수 있기 때문이죠. (예를 들어 checkboxradiocreate event 같은). 만약 생성되기 전에 만들면 (이벤트 이전이 되겠죠) 그러면 이 메소드 call 은 소용없습니다. 그리고 Firebug에서 보시면 jQuery 에러를 만들어 냅니다. 왜냐하면 non-authorized context 안에서 이 메소드가 사용되기 때문이죠.




반응형