태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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,675	[Shoutcast] 현재 플레이되는 곡명 스크립트 PHP
2,674	[Shoutcast] 스트리밍 노래제목을 변경 스크립트
2,673	Shoutcast PHP Scripts
2,672	FTP에서 삭제 안되는 파일이나 폴더 삭제하기
2,671	SHOUTcast 를 이용한 인터넷 라이브 방송 시스템 구축
2,670	DAUM 우편번호 서비스 활용하기
2,669	실행중 PHP 에러 메시지 레벨 조정하기
2,668	PHP 인젝션과 file get contents의 관계
2,667	문자열 글자 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse String
2,666	배열 요소 순서 거꾸로 뒤집기, 앞뒤 반전 Reverse Array
2,665	php 메모리 사용
2,664	자바스크립트 내부 객체 보기
2,663	자바 스크립트 숫자 처리 콤마 처리
2,662	자바스크립트 Base64 encode, decode
2,661	PHP 문자열 관련 함수
2,660	[php] 문자열을 나누거나 합치는 explode, implode 함수
2,659	php 문자열 자르기 나누기 분리하기 - explode() , split()
2,658	DB 접근 및 쿼리문(insert,select,update,delete)
2,657	[MySQL] 필드에서 특정문자 포함 또는 제외한 DB 검색, LIKE ,NOT
2,656	php5 mysqli 디비 접속 클래스 프로그램 및 사용법
2,655	PHP 문자열 나누기 - explode()
2,654	[PHP] 배열 Array
2,653	php 배열
2,652	[php] Array() 배열이란?
2,651	PHP 배열 함수 정리
2,650	PHP 기본적인 배열 사용법
2,649	html에서 입력한값 DB에서 받아오기 (도서정보 검색)
2,648	SQL 쿼리 정리
2,647	[MySql]DB에서 서로 다른 테이블의 데이터를 한번에 불러오기
	jquery checkbox 전체 선택, 전체 해제, 체크 값 추출