태그 자료실 2911

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

9년 전

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

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

추천 목록

번호	제목
2,681	javascript escape/unescape -> php
2,680	폴더안의 파일 가지고 놀기
2,679	정규 표현식으로 한글 문자 포함하는지 확인하기
2,678	유니코드를 이용 한글 초성, 중성, 종성으로 쪼개기 - 한글/영문 변환
2,677	한글 초성,중성,종성 자르기 함수
2,676	파이썬에서 유니코드 스트림 다루기
2,675	Python 2.x 한글 인코딩 관련 정리
2,674	%uABCD%u1234 같은 url의 유니코드 디코딩
2,673	한글, 한자를 유니코드로 변환하기
2,672	경로 분리하기
2,671	한글 ASCII 코드를 웹 URL에서 사용되는 UTF8 코드로 변환
2,670	Unicode (UTF-8) 인코딩에서 한글 글자수 출력 및 iconv substr
2,669	PHP에서 유니코드로 문자열 인코딩하기
2,668	[JavaScript] 뒤로가기 히스토리가 없는 것을 어떻게 알 수 있을까?
2,667	htmlspecialchars, entity decode
2,666	Php : Finding Chrome and Safari Browsers
2,665	[Shoutcast] jPlayer and Shoutcast Configuration
2,664	[Shoutcast] 현재 플레이되는 곡명 스크립트 PHP
2,663	[Shoutcast] 스트리밍 노래제목을 변경 스크립트
2,662	Shoutcast PHP Scripts
2,661	FTP에서 삭제 안되는 파일이나 폴더 삭제하기
2,660	SHOUTcast 를 이용한 인터넷 라이브 방송 시스템 구축
2,659	DAUM 우편번호 서비스 활용하기
2,658	실행중 PHP 에러 메시지 레벨 조정하기
2,657	PHP 인젝션과 file get contents의 관계
2,656	문자열 글자 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse String
2,655	배열 요소 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse Array
2,654	php 메모리 사용
2,653	자바스크립트 내부 객체 보기
2,652	자바 스크립트 숫자 처리 콤마 처리