본문 바로가기

Development/PHP

[PHP+JQuery]체크박스 배열 값 POST로 넘기기 / JQuery로 이벤트

[JQuery]


Ⅰ. 체크박스 전체선택 이벤트


1. HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
<meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div style="padding-left:30px;">
    <form action="" name="writeform" method="POST">
        <div class="form-group">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkAll" class="chk">
                    <span class="label label-primary"><small>전체</small></span>
                </label>
 
                <label>
                    <input type="checkbox" name="check[]" class="chk" value="사과">
                    <span class="label label-info"><small>사과</small></span>
                </label>
 
                <label>
                    <input type="checkbox" name="check[]" class="chk" value="레몬">
                    <span class="label label-info"><small>레몬</small></span>
                </label>
 
                <label>
                    <input type="checkbox" name="check[]" class="chk" value="딸기" >
                    <span class="label label-info"><small>딸기</small></span>
                </label>
            </div>
        </div>
        <input type="submit" name="submit" value="submit" class="btn btn-primary">
    </form>
</div>
</body>
</html>
cs

2. JQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    // 전체선택 버튼 클릭시 체크박스 전체 선택
    $("#checkAll").click(function(){
        if($("#checkAll").is(":checked")){
            $(".chk").prop("checked"true);
        } else {
            $(".chk").prop("checked"false);
        }
    });
 
    // 전체 선택 중 한개의 체크박스 선택 해제 시 전체선택 체크박스 해제
    $(".chk").click(function(){
        if($("input[name='check[]']:checked").length == 3){
            $("#checkAll").prop("checked"true);
        }else{
            $("#checkAll").prop("checked"false);
        }
    });
</script>
cs


3. 실행 결과

See the Pen JQuery check box by HanSeungHwa (@hanseunghwa) on CodePen.




Ⅱ. 배열로 선택된 체크박스 값 POST로 넘기고 받기


(1). HTML 소스코드는 위의 코드로 실행하였습니다.

(2). 선택된 값들을 POST로 넘겨줍니다.

(3). 넘어온 값들을 implode 함수를 이용해서 한 문자열로 출력합니다.

(4). 한 문자열로 출력된 결과값중 "딸기" 라는 단어가 있는지 strpos 함수를 이용해 확인합니다.


※ 함수 정리


(1). implode()


이전에 포스팅한 explode() 함수가 문자열을 나누는 함수 였다면, implode() 함수는 문자를 합치는 함수 입니다.


implode($glue , $prices)


배열 원소를 glue 문자열로 결합시켜 주며, 빈 문자열(공백)을 허용합니다.


(2). strpos()


문자열에 특정 문자열이 포함되어 있는지 확인하는 함수 입니다.


strpos($string, needle "찾을문자");



1. 소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
 
    $check = $_POST['check'];
    // POST로 넘어온 값들을 $check에 저장
 
    $array = array($check);
    // check의 값들을 새로운 배열에 저장
 
    foreach ($array as $value){
        $result = implode("|",$value);
        // 배열 값들을 "|" 로 나누어서 한 문자열로 저장
 
        echo "<pre>";
        var_dump($result);
        echo "</pre>";
    }
 
    // 결과값 문자열에 "딸기" 라는 문자가 포함되어 있으면 true 없으면 false
    if(strpos($result,'딸기'!== false){
        echo "딸기가 있다!!<br>";
    }else{
        echo "딸기가 없다...<br>";
    }
 
?>
cs


2. 실행결과


(1) "딸기"가 포함되어 있을 때



(2) "딸기"가 포함되어 있지 않을 때