체크박스 여러개중에 체크한것만 삭제하기

상기 이미지 예제중에 왼쪽에 체크 박스가 있다. 그리고, 이를 삭제하는 휴지통 아이콘이 있는데 체크한것만 해당 자료를 삭제하고 싶다.

위의 소스를 대략적으로 중요 부분만 간추리면 아래와 같다.

<form name="f" method="post"> <input type="checkbox" id="c1" name="chk[]" value="3"> <input type="checkbox" id="c2" name="chk[]" value="14"> <input type="checkbox" id="c3" name="chk[]" value="5"> <input type="checkbox" id="c4" name="chk[]" value="8"> <br> <input type="button" value="삭제" onclick="historyDel()"> </form> <script> function historyDel() {  var form = document.f;  var boo = false;                // 삭제할 항목을 체크했는지 여부 구분자  if (document.getElementsByName("chk[]").length > 0) {   for (var i=0;i<document.getElementsByName("chk[]").length;i++) {    if (document.getElementsByName("chk[]")[i].checked == true) {     boo = true;     break;    }   }  }  if (boo) {   form.action = "history_del.php";   form.submit();  } else {   alert("개별 삭제하실 항목을 적어도 하나는 체크해 주십시오.");  } } </script>

위 소스를 보면 document.getElementByName("chk[]") 요놈이 핵심이다.

적어도 하나는 체크하면 boo 값을 true 로 주고, 정상적으로 삭제 처리 페이지로 post 값 넘겨 주면 된다.

그리고, name 값을을 chk[] 라면 형태로 준 이유는 php의 경우 chk[] 라고 name 입력값을 여러개 주면

다음 처리페이지에서 체크박스에 체크한것만, chk 배열값으로 넘어온 값들을 모을 수 있다.

(*) 처리 페이지 내용 소스 [ php 의 경우 ]  

$delArr = $_POST[chk];  for ($i=0;$i<sizeof($delArr);$i++) {     echo $delArr[$i] . "<br>";    // 이부분에서 넘어온 배열처리된 각각의 no  값을 받아서 삭제하면된다.  }