'StudyData/Javascript'에 해당되는 글 2건

  1. 2009.04.14 div 태그 나타나기/숨기기 기능 구현
  2. 2009.04.06 체크박스 전부체크/전부해제 (2)

나타나기/숨기기





위에 링크를 클릭해보면 무엇을 구현했는지 알 수 있다.

<div> </div> 영역을 숨기기 나타나기 기능을 구현한 함수 기능이다.

나는 상세검색용 옵션을 감추고 보여주는 기능을 응용을 했다.

기본적으로 <div> 태그옵션을 style="display:none" 으로 해서

숨겨지게 했다. 처음부터 보이게 만들고 싶으면

style="display:none" 부분만 지우면 된다.

** 소스 **

<script language="javascript">
<!--
function toggleLayer(layer)
{
    var l = document.getElementById(layer);
    if(l.style.display == "")
        l.style.display = "none";
    else if(l.style.display == "none")
        l.style.display = "";
}
-->
</script>

<!--toggleLayer 함수 호출은-->
<a href="javascript:toggleLayer('xx');"> </a>

<!--클릭할때마다 나타나고 숨기는 <div> 영역을 구현-->
<div id="xx" style="display:none"></div>


'StudyData > Javascript' 카테고리의 다른 글

div 태그 나타나기/숨기기 기능 구현  (0) 2009.04.14
체크박스 전부체크/전부해제  (2) 2009.04.06
Posted by 이라크왕자

댓글을 달아 주세요

 전부 체크/해제!


 체크박스2!

 체크박스3!

 체크박스4!



간단한 실습 예제

<HTML>
 <HEAD>
  <TITLE> 체크박스 예제 </TITLE>
 </HEAD>
 <script language="javascript">
 <!--
function checkbox_checked()
{
    if(document.checkedform.checkbox4.checked)
    {
        // 체크박스 전부 체크
        document.checkedform.checkbox42.checked = true;
        document.checkedform.checkbox43.checked = true;
        document.checkedform.checkbox44.checked = true;
    }
    else if(!document.checkedform.checkbox4.checked)
    {
        // 체크박스 전부 해제
        document.checkedform.checkbox42.checked = false;
        document.checkedform.checkbox43.checked = false;
        document.checkedform.checkbox44.checked = false;
    }
}
-->
</script>
 <BODY>
  <form name="checkedform" method="post" action="test.html">
   <p><input type="checkbox" name="checkbox4" value="checkbox" OnClick="javascript:checkbox_checked()">전부 체크/해제!</p>
   <p><input type="checkbox" name="checkbox42" value="checkbox">체크박스2!</p>
   <p><input type="checkbox" name="checkbox43" value="checkbox">체크박스3!</p>
   <p><input type="checkbox" name="checkbox44" value="checkbox">체크박스4!</p>
   </form>
 </BODY>
</HTML>

<!--
ps. 중복체크검색 구현을 위해서 간단한 실습을 해보고 적용시켜 보았다.

중복되는 체크가 한두개가 아니라 여러개가 있을 경우 하나하나 찍기가

여간 귀차니즘을 불러일으킬 것이다. 그래서 전부체크와 해제되는 체크박스를

만들어서 관리하면 편하겠다.
-->

'StudyData > Javascript' 카테고리의 다른 글

div 태그 나타나기/숨기기 기능 구현  (0) 2009.04.14
체크박스 전부체크/전부해제  (2) 2009.04.06
Posted by 이라크왕자

댓글을 달아 주세요

  1. 2009.04.07 14:44 신고

    체크박스 전부체크/전부해제, 어떻게 사용하는 건지 설명이 있으면 좋겠네요. 쓸만한것 같군요. ^^

    • 2009.04.07 19:29 신고

      안녕하세요. 직접 댓글까지 달아주시니 감사합니다 ㅁ_ㅁㅋ

      요즘 html 붙들고 간단한 예제들을 통해 배우고 있는중이라서

      참고가 될만한건 업데이트하고 있네요.

      설명이 도움이 될런지는 모르겠지만 수정토록 하겠습니다.

이전버튼 1 이전버튼