이번엔 간단하게 웹페이지의 체크박스 리스트에서 값을 조회해 보자

   var  v = '';
   for (var i = 0; i < $("input:checkbox").length; i++) {
        if ($("input:checkbox")[i].checked == true) {
            v = v + "|" + $("input:checkbox")[i].value;
        }
    }

이런식으로 배열의 첨자를 하나씩 증가시키며 값을 조회해도 된다.



jquery checkbox 제어하기(2)
jQuery로 checkbox 제어(1)

저작자 표시 비영리 변경 금지
신고

'개발 > 기타' 카테고리의 다른 글

[ORALCE] instr, substr  (0) 2009.06.15
jquery - checkbox 제어하기(3)  (0) 2009.04.24
jquery checkbox 제어하기(2)  (2) 2009.04.21
jQuery로 checkbox 제어(1)  (1) 2009.02.15
지난 번(가기)에 이어 이번엔 간단하게
웹페이지에 있는 모든 체크박스를 모두 체크하고 모두해제하는 간단한 함수를 만들어 보자

$(document).ready(function() {

    $("#ckAll").click(function() {
        if ($("#ckAll:checked").length > 0) {
            $("input:checkbox:not(checked)").attr("checked", "checked");
        } else {
            $("input:checkbox:checked").attr("checked", "");
        }

    });
});

<input type='checkbox' id='ckAll' /><label for='ckAll'>모두체크/해제</label>

위와 같은 체크박스가 있고 아래로 주주룩 체크박스들이 있다고 하자
위의 소스는 #ckAll 체크박스의 click 이벤트를 잡아서 동작한다.

만약에 #ckAll 이 체크되었으면        /
if ($("#ckAll:checked").length > 0) /
모든 체크안된 체크박스를 체크하며 /
$("input:checkbox:not(checked)").attr("checked", "checked"); / (어트리뷰트에 checked='checked'를 추가한다.)
#ckAll 이 체크가 안되어 있으면
모든 체크된 체크박스를 체크해제한다. /
$("input:checkbox:checked").attr("checked", ""); /

이해가 가시죠~..
좋은 하루 되세요^^

jQuery로 checkbox 제어(1)

저작자 표시 비영리 변경 금지
신고

'개발 > 기타' 카테고리의 다른 글

jquery - checkbox 제어하기(3)  (0) 2009.04.24
jquery checkbox 제어하기(2)  (2) 2009.04.21
jQuery로 checkbox 제어(1)  (1) 2009.02.15
JavaScript Playstates Event Code  (0) 2008.12.04
  1. 감사합니다. 2010.09.29 22:42 신고

    야근의 쩔은 육체와 스트레스...
    복사허용으로 코딩까지 덜어 한방에 풀었습니다. 좋은 날 되세요.

  2. 마리 2011.03.15 10:19 신고

    $("input:check:not(checked)") 로는 안되고
    $("input:checkbox:not(checked)") 로 해야 되는데요...

일단 Body에 제어할  checkbox를 놓아두자.
<body>
    <form id="form1" runat="server">
    <br />
    <input type="checkbox" id="check1" value="1" />1&nbsp;   
    <input type="checkbox" id="check2" value="2" />2&nbsp;
    <input type="checkbox" id="check3" value="3" />3&nbsp;
    <input type="checkbox" id="check4" value="4" />4&nbsp;
    <br />
    <input type="button" id="btnCheck" value="_submit" />&nbsp;
    <input type="button" id="btnAllCheck" value="all check" />&nbsp;
    <input type="button" id="btnUnCheck" value="all uncheck" />
    </div>
    </form>
</body>

스크립트 제어부분
<script type="text/javascript" src="Js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
        $(function() {
            // ---------- 01 -------------       
            $("#btnCheck").click(function() {
                alert($("input:checkbox:checked").length);
            });
            //----------- 02 -------------
            $("#btnAllCheck").click(function() {
                $("input:checkbox:not(checked)").attr("checked", "checked");
            });
            //------------ 03 ------------
            $("#btnUnCheck").click(function() {
                $("input:check:checked").attr("checked", "");
            });
        })
    </script>

Body안에는 제어할 체크박스를 위치하고
각각의 기능을 할 버튼을 세게 배치 하였다.

첫번째 버튼은 현재 체크되어 있는 체크박스의 수를 센다.
01번 위치의 스크립트를 보면
#btnCheck ID를 가진 버튼의 Click Event가 발생하면 실행되는 부분이다.
$("input:checkbox:checked").length 는 현재 웹페이지의 checkbox의 check 된 element의 수를 센다.

02번
#("input:checkbox:not(checked).attr("checked","checked") 는 현재 웹페이지에서 체크되지 않은 
[ not(checked) ] checkbox에 checked 어트리뷰트를 추가 [ .attr("checked", "checked) ]한다.

반대로 03번은 checked 어트리뷰트에 checked 속성에 공백을 넣어서 checked 속성을 없애버렸다.

jQuery 의 셀렉터에 대해서는 아래를 참조하자

http://docs.jquery.com/Selectors

좋은 하루 되시길...

저작자 표시 비영리 변경 금지
신고

'개발 > 기타' 카테고리의 다른 글

jquery checkbox 제어하기(2)  (2) 2009.04.21
jQuery로 checkbox 제어(1)  (1) 2009.02.15
JavaScript Playstates Event Code  (0) 2008.12.04
JSON맛보기  (0) 2008.08.27
  1. leetaiji 2011.03.30 09:30 신고

    많은 도움이 되었습니다. 감사합니다.

SilverLight

  http://silverlight.net/             실버라이트 공식 홈페이지(영문)
 
http://onestone.tistory.com/     실버라이트 관련 블로그(한글)
 
http://www.microsoft.com/expression/try-it/default.aspx  Expression 다운로드


JAVA

java 도움말 다운로드        java API Doc(chm) 한글번역본 다운로드


jQuery                                            
http://docs.jquery.com/Selectors
http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html

신고

'개발 > 기타' 카테고리의 다른 글

JavaScript Playstates Event Code  (0) 2008.12.04
JSON맛보기  (0) 2008.08.27
Soap Toolkit 을 이용하여 ASP에서 웹서비스 이용하기  (0) 2008.08.27
즐겨찾기  (0) 2008.03.11

+ Recent posts