태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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>

추천 목록

번호	제목
2,735	[jQuery]toggleClass() 메서드로 CSS 클래스에 대한 토그링
2,734	JQuery 메서드 한번만 실행 ( One() )
2,733	jQuery Event(이벤트에 생명을)
2,732	jQuery Event - bind() 메서드를 통한 이벤트 연결
2,731	escapeshellcmd
2,730	passthru
2,729	system
2,728	exec
2,727	proc_open
2,726	popen
2,725	fgetc
2,724	fgets
2,723	fclose
2,722	fopen
2,721	fsockopen
2,720	stream_set_timeout
2,719	JQUERY 클릭 이벤트 강제 발생
2,718	ajaxComplete() Ajax가 완료되면 호출
2,717	ajaxError() Ajax 에러가 발생되면 호출
2,716	jQuery.ajaxPrefilter() $.ajax() 함수 호출 전 Ajax 옵션 수정
2,715	ajaxSend() Ajax 요청을 보내기 전에 호출되는 이벤트
2,714	jQuery.ajaxSetup() Ajax 옵션 값을 설정하는 함수
2,713	ajaxStart() Ajax 요청이 시작될 때 호출되는 함수
2,712	ajaxStop() Ajax 요청이 완료되면 호출
2,711	ajaxSuccess() Ajax 요청이 성공적으로 완료 때마다 호출
2,710	jQuery.getScript, JavaScript 파일을 로드하고 실행
2,709	load(), Ajax로 받은 HTML을 일치하는 요소 안에 추가
2,708	jQuery.param(), Ajax 데이터용 배열이나 객체를 직렬화
2,707	jQuery.get() HTTP GET 방식 Ajax 요청
2,706	jQuery.post(), Ajax HTTP POST 방식 요청