태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

jquery checkbox 전체 선택, 전체 해제, 체크 값 추출

8년 전

체크 박스 전체 석택
체크 박스 전체 해제
체크 되어 있는 값 추출
서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">

        $(document).ready(function() {

                // 체크 박스 모두 체크
                $("#checkAll").click(function() {
                        $("input[name=box]:checkbox").each(function() {
                                $(this).attr("checked", true);
                        });
                });

                // 체크 박스 모두 해제
                $("#uncheckAll").click(function() {
                        $("input[name=box]:checkbox").each(function() {
                                $(this).attr("checked", false);
                        });
                });

                // 체크 되어 있는 값 추출
                $("#getCheckedAll").click(function() {
                        $("input[name=box]:checked").each(function() {
                                var test = $(this).val();
                                console.log(test);
                        });
                });

                // 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
                $("#updateChecked").click(function() {
                        var splitCode = $("#splitCode").val().split(",");
                        for (var idx in splitCode) {
                                $("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
                        }
                });

                // test case
                test1();

        });

        function test1() {

                console.log("################################################");
                console.log("## test1 START");
                console.log("################################################");

                var cnt = $("input:checkbox").size();
                console.log("checkboxSize=" + cnt);

                $("input[name=box]:checkbox").each(function() {
                        var checkboxValue = $(this).val();
                        console.log("checkboxValue=" + checkboxValue);
                });

                console.log("----------------------------------------------");

                $("#checkboxArea").children().each(function() {
                        var checkboxValue = $(this).children(":checkbox").val();
                        var text = $(this).children().eq(1).text();
                        console.log(text + "=" + checkboxValue);
                });
        }

</script>
</head>
<body>

        <div id="checkboxArea">
                <li><input type="checkbox" name="box" value="A" /><label>1번째 checkbox</label></li>
                <li><input type="checkbox" name="box" value="B" /><label>2번째 checkbox</label></li>
                <li><input type="checkbox" name="box" value="C" /><label>3번째 checkbox</label></li>
                <li><input type="checkbox" name="box" value="D" /><label>4번째 checkbox</label></li>
        </div>

        <br/><br/>

        <div id="buttonGroups">
                <input type="button" id="checkAll" value="check all" />
                <input type="button" id="uncheckAll" value="uncheck all" />
                <input type="button" id="getCheckedAll" value="get checked all" />
                <input type="button" id="updateChecked" value="updateChecked" />
        </div>

        <input type="hidden" id="splitCode" name="splitCode" value="A,C,D" />

</body>
</html>

추천 목록

번호	제목
365	jQuery.get() HTTP GET 방식 Ajax 요청
364	jQuery.post(), Ajax HTTP POST 방식 요청
363	jQuery.getJSON, JSON 데이터를 로드
362	jQuery length와 slideToggle 예제
361	[CSS] before와 after 선택자를 이용하여 Float 속성 해제
360	jQuery toggleClass() Methods
359	jQuery stop(),Callback,Chaining
358	jQuery Effects - Animation
357	jQuery Effects - Sliding
356	jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo()
355	jQuery hide(), show(), toggle()
354	jquery trigger(), 함수 실행시키기
353	폴더안의 파일 가지고 놀기
352	파이썬에서 유니코드 스트림 다루기
351	Python 2.x 한글 인코딩 관련 정리
350	htmlspecialchars, entity decode
349	Php : Finding Chrome and Safari Browsers
348	[Shoutcast] jPlayer and Shoutcast Configuration
347	[Shoutcast] 현재 플레이되는 곡명 스크립트 PHP
346	[Shoutcast] 스트리밍 노래제목을 변경 스크립트
345	Shoutcast PHP Scripts
344	FTP에서 삭제 안되는 파일이나 폴더 삭제하기
343	DAUM 우편번호 서비스 활용하기
	jquery checkbox 전체 선택, 전체 해제, 체크 값 추출
341	Setting .htaccess to allow PHP to be accessed with .xml extension
340	jQuery API: Manipulation, Events, Effects, Internals, Utilities
339	[Android] Intent 활용 예시
338	HTML5 관련 유용한 레퍼(참조) 사이트
337	IE6~7 문제해결
336	나눔고딕 구글 웹폰트(Webfont) 사용하기