[javascript] checkbox 전체선택, 전체해제, 선택한 checkbox 내용확인하기 1

javascript 소스상으로 checkbox 의 전체선택, 전체해제 기능과 체크한 checkbox 만의 내용을 확인해보는 간단한 예제를 만들어 정리해 보았다.

실무상으로 자주 쓰이기 때문에 반드시 익혀두도록 하자.

 

 

 

<form name="f" method="post">
    <input type="checkbox" id="item1" name="item[]" value="귤">   <label for="item1">귤</label> 
    <input type="checkbox" id="item2" name="item[]" value="사과"> <label for="item2">사과</label>   
    <input type="checkbox" id="item3" name="item[]" value="마늘"> <label for="item3">마늘</label> 
    <input type="checkbox" id="item4" name="item[]" value="딸기"> <label for="item4">딸기</label>  
 
    <br/><br>
 
    <input type="button" value="체크한 내용 확인하기" onclick="itemChk()">
 
    <br><br>
 
    <input type="checkbox" id="itemAll" name="itemAll" value="y" onclick="itemAllChk()"> <label for="itemAll">전체선택/전체해제</label>
</form>
 
<script>
function itemAllChk() {
    if (document.getElementById("itemAll").checked) {
        
        var obj = document.getElementsByName("item[]");
        for (i=0;i<obj.length;i++) {
            obj[i].checked = true;
//            document.getElementsByName("item[]")[i].checked = true;
        }
 
    } else {
 
        var obj = document.getElementsByName("item[]");
        for (i=0;i<obj.length;i++) {
            obj[i].checked = false;
//            document.getElementsByName("item[]")[i].checked = false;
        }
 
    }
}
 
function itemChk() {
    var str = "";
 
    var obj = document.getElementsByName("item[]");
    for (i=0;i<obj.length;i++) {
        if (obj[i].checked) {
            str += " " + obj[i].value;
        }
    }
    alert(str);
}
</script>

 

위에서 핵심 소스가 

<input type="checkbox" name="item[]">

<input type="checkbox" name="item[]">

<input type="checkbox" name="item[]">

 

이런식으로 여러개 있을경우에 document.getElementsByName("item[]") 형태로 이용하는 방법이다.

 

PHP의 경우에,

name 값을 item[] 으로 해놓고 post방식으로 submit 하면 선택한 내용만 각각의 value값을 얻을 수 있다.

 

$itemArr = $_POST["item"];

for ($i=0;$i<sizeof($itemArr);$i+) {

  echo $itemArr[$i] . "<br>";
}