🔥우당탕탕 개발기 - checkbox

📌 미루고 미루던 체크박스로 다중 삭제 하기 🔅

👇🏻삭제 버튼을 클릭하면 remove 함수가 실행된다.

function remove() {
    let obj = document.querySelectorAll(".check"); //체크 박스 -> class가 check
    let idList = new Array();
    for (let i = 0; i< obj.length; i++) {
        if (obj[i].checked == true) {
            // 체크 박스 th:name="${member.id}"이다. 체크된 항목의 id만 idList에 넣기
            idList.push(obj[i].name);
        }
   
    }

    $.ajax({
        type: 'POST',
        url: '/basic/members',
        traditional: true,
        dataType: 'text',
        data: {
            'ids': idList
        },
    }).done(function(res) {
        idList.forEach((id) => {
            let tr = document.querySelectorAll('.member');
            // console.log(tr.textContent);
            tr.forEach(elem => {
                if (elem.getAttribute('id') === id) {
                    elem.parentElement.removeChild(elem);
                }
            })
        })
    }).fail(function (error) {
        alert(JSON.stringify(error));
    })
}

이런 식으로 새로고침 시켜도 되지만 새로고침되지 않고 화면이 정리되는 게 더 나이스 한 방법이라 알고 있어야 한다고 한다.

    $.ajax({
        type: 'POST',
        url: '/basic/members',
        traditional: true,
        dataType: 'text',
        // contentType: 'application/json; charset=utf-8',
        data: {
            'ids': idList
        },
    }).done(function(res) {
            location.reload();
        })
    .fail(function (error) {
        alert(JSON.stringify(error));
    })

DB에도 잘 지워주기

    @PostMapping
    public String multicheck(@RequestParam String ids, Model model) {
        List<String> IDs = new ArrayList<String>(Arrays.asList(ids.split(",")));
        for (String id : IDs) {
            memberService.deleteMember(Long.parseLong(id));
        }

        return "redirect:/basic/members";
    }

📌 알게된 점

• form 안에 form 을 넣으면 안 된다
• DOM 삭제
• button
  button의 type에는 3가지 값을 지정해 줄 수 있는데 각각 submit, reset, button이다. 만약 아무런 값도 지정하지 않았다면 기본값은 submit이다.
  type="submit" : 폼의 전송 기능을 담당한다.
  "button" 자식 요소를 가질 수 있기 때문에, 이미지/텍스트/가상 요소 등 다양한 활용이 가능하다
  

---

다음은
시스템 장애가 생겼을 때 복구할 방법 생각해 보기
컨트롤러 multicheck에서 리다이렉트가 안되는 이유 -> location.reload();를 해주면 해결