'checkbox 전체선택'에 해당되는 글 2건

  1. 2008.03.10 체크박스_전체체크&전체해지_01
  2. 2008.03.10 체크박스_전체체크&전체해지_02

체크박스_전체체크&전체해지_01

JavaScript 2008. 3. 10. 00:28
<html>
    <head>
        <title>연습</title>
        <script type="text/javascript">
            function check()
            {
                var allbox = document.getElementById('allbox');
                var chkbox = document.getElementsByName('chkbox');
                for(var i = 0; i < chkbox.length; i++)
                {
                    if(allbox.checked == true)
                    {
                        chkbox[i].checked = true;
                        txtChk.innerHTML = '전체해제ㅋ<br />';
                    }
                    else
                    {
                        chkbox[i].checked = false;
                        txtChk.innerHTML = '전체선택ㅋ<br />';
                    }
                }
            }
        </script>
    </head>
    <body>
      <form name="form1" id="form1" method="post" action="test2.asp" >
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>         
            <input type="checkbox" id="allbox" name="allcheck" value="1" onclick="check();" /><span id="txtChk">전체선택ㅋ</span>
          </td>
        </tr>         
        <tr>         
          <td>                      
            <input type="checkbox" name="chkbox" value="2" /><br />
            <input type="checkbox" name="chkbox" value="3" /><br />
            <input type="checkbox" name="chkbox" value="4" /><br />
            <input type="checkbox" name="chkbox" value="5" /><br />
            <input type="checkbox" name="chkbox" value="6" /><br />
            <input type="checkbox" name="chkbox" value="7" /><br />
            <input type="checkbox" name="chkbox" value="8" /><br />
            <input type="checkbox" name="chkbox" value="9" /><br />           
          </td>           
        </tr>
      </table>
      </form>         
    </body>
</html>



<결과 보기>
Posted by 귀찮은 여니씨
,

체크박스_전체체크&전체해지_02

JavaScript 2008. 3. 10. 00:26

전체 체크 및 전체 해지
선택 한 값 submit으로 넘겨서 확인하기

<소스>
<html>
  <head>
    <script type="text/javascript">
      function check(YN)
      {
       //변수 지정 & getElement로 각 개체값 받아오기
        var chkbox = document.getElementsByName('chkbox');      
        var btnAll_S = document.getElementById('btnAll_01');
        var btnAll_C = document.getElementById('btnAll_02');
       
        for(var i = 0; i < chkbox.length; i++ )
        {
          if(YN == 'Y') //전체체크값 명령받으면
          {
            chkbox[i].checked = true;  //체크박스 체크
            btnAll_S.style.display = 'none';  //전체보기버튼 안보이기
            btnAll_C.style.display = 'block'; //전체취소버튼 보이기
          }
          else
          {
            chkbox[i].checked = false;
            btnAll_S.style.display = 'block';
            btnAll_C.style.display = 'none';   
          }
        }
      }
    </script>
  </head>
 
  <body>
    <form name="frm_check" method="post" action="test3_1.asp">
    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td> 
          <input type="button" value="전체선택" onclick="check('Y');" id="btnAll_01">
          <input type="button" value="전체취소" onclick="check('N');" id="btnAll_02" style="display:none">
        </td>
      </tr>       
      <tr>       
        <td>
          <input type="checkbox" name="chkbox" value="1"><br>
          <input type="checkbox" name="chkbox" value="2"><br>
          <input type="checkbox" name="chkbox" value="3"><br>
          <input type="checkbox" name="chkbox" value="4"><br>
          <input type="checkbox" name="chkbox" value="5"><br>
          <input type="checkbox" name="chkbox" value="6"><br>
          <input type="checkbox" name="chkbox" value="7"><br>
          <input type="checkbox" name="chkbox" value="8"><br>
        </td>
      </tr>
      <tr>               
        <td>       
          <input type="submit" value="전송"><br><br>
        </td>
      </tr>                 
    </table>     
    </form>
'========= 이 부분은 IIS 설치한 사람들만!!!! =================================   
        <%
             CHKBOX = REQUEST("chkbox") 'submit으로 넘어온 체크박스값받기!!
             NUM = SPLIT(CHKBOX, ",")
             'SPLIT함수 = > 문자열자르기!!
             'response.write "CHKBOX = '" & CHKBOX & "'<br>" 로찍어보면
             '값이 CHKBOX = '2, 3, 4, 5, 6, 7, 8, 9'로 넘어오는걸 확인할 수 있음!!
           
             Response.Write ubound(NUM)+1 & "개가 선택되었습니다.<br>"
            '몇개의 선택값이 선택되었는지 출력

             FOR i = 0 TO ubound(NUM)
                Response.Write TRIM(NUM(i)) & "<br>"
               ' ","기준으로 잘린 문자열 뿌려주기~ㅋ
             NEXT
        %>    
'========= 이 부분은 IIS 설치한 사람들만!!!! =================================
  </body>
</html>


전체선택&전체해제 동작 결과 보기


체크박스에 대한 속성이나 스타일 이벤트등 더 알고 싶을때는~
http://koxo.com/lang/js/object/checkbox.html 여기를 이용주세요~!!~
Posted by 귀찮은 여니씨
,

티스토리툴바