체크박스 전체 선택, 삭제등

- jsp 단에서 모든 체크박스를 선택할 체박스를 제목줄에 만들어 준다. 

그리고 세부 체크박스들은 forEach 를 통해서 생기게 된다. 

 

모두체크 function : allChk()

삭제 function :fn_userDel()

 form : userForm

 =====================================================================================================

<thead> 

<tr>
       <th scope="col"><input id="allCheck" type="checkbox" onclick="allChk(this);"/></th>
       <th scope="col">사용자ID</th>
       <th scope="col">사용자명</th>
       <th scope="col">부서명</th>
       <th scope="col">직급</th>
       <th scope="col">E-mail</th>
       <th scope="col">사용여부</th> 

</tr>

<tbody> 
      <c:forEach var="result" items="${requestMap.userList}" >
       <tr >
            <td class="text_ct"><input name="RowCheck" type="checkbox" value="${result.user_id}"/></td>
            <td class="text_ct"><a hrf="#">${result.user_id}</a></td>
            <td class="text_lt text_unline"><a hrf="#"> ${result.user_nm}&nbsp; </a></td>
            <td class="text_ct">${result.duty}&nbsp;</td>
            <td class="text_ct">${result.position_nm}&nbsp;</td>
            <td class="text_ct">${result.email}&nbsp;</td>
            <td class="text_ct">활성</td> 
       </tr>
      </c:forEach> 

</tbody>   

=======================================================================================================

 

 

<script type="text/javascript">

// 1.모두 체크
  function allChk(obj){
      var chkObj = document.getElementsByName("RowCheck");
      var rowCnt = chkObj.length - 1;
      var check = obj.checked;
      if (check) {
          for (var i=0; i<=rowCnt; i++){
           if(chkObj[i].type == "checkbox")
               chkObj[i].checked = true; 
          }
      } else {
          for (var i=0; i<=rowCnt; i++) {
           if(chkObj[i].type == "checkbox"){
               chkObj[i].checked = false; 
           }
          }
      }
  } 

  

//2. 체크박스 선택된 것 삭제 처리 (N개) 
   function fn_userDel(){

  var userid = "";
  var memberChk = document.getElementsByName("RowCheck");
  var chked = false;
  var indexid = false;
  for(i=0; i < memberChk.length; i++){
   if(memberChk[i].checked){
    if(indexid){
      userid = userid + '-';
    }
    userid = userid + memberChk[i].value;
    indexid = true;
   }
  }
  if(!indexid){
   alert("삭제할 사용자를 체크해 주세요");
   return;
  }
  document.userForm.delUserid.value = userid;       // 체크된 사용자 아이디를 '-'로 묶은 userid 를     

                                                                              document.userForm.delUserid 의 value로 저장 
  
  var agree=confirm("삭제 하시겠습니까?");
     if (agree){
   document.userForm.execute.value = "userDel";
     document.userForm.submit();
     } 
  }

 

</script> 

 

모두체크 하는 function은 그대로 이용이 가능하지만

선택 삭제 하는 function은 jsp form 이름을 바꿔줘야 한다.

그리고 RowCheck 의 value값은 해당 체크박스를 고유하게 식별할 수 있는 값이 들어가야 한다. (예를들어 사용자의 아이디값) 

 

 document.userForm.submit();   으로 submit을 하여 '-' 로 묶인 userid가  delUserid 이름으로 자바단으로 넘어가게 된다.

 

 

================== JAVA 단 ======================

 

public void userDel(Map requestMap) throws Exception {
  
  String delUser = requestMap.get(Management.DEL_USER).toString();
  System.out.println("Service ======= delUser>>" + delUser);
  
  String[] userArr = delUser.split("-");                     // '-'로 연결된 userid를 split으로 잘라 배열에 넣음.
  
     if(userArr != null && userArr.length>0){
       for(int i=0 ; i<userArr.length ; i++){ 
        requestMap.put(Parameter.USER_ID , userArr[i]);
        System.out.println("==============    "+i +"번째 userid ==  " + requestMap.get(Parameter.USER_ID));
        manageDao.userDel(requestMap);
       }
     }  
 }