html input checkbox checked 확인방법

html input checkbox checked 확인방법

---

input ckeckbox 체크 확인

$("#check-box-3").is(":checked") // boolean

 

📄 html

<input id="check-box-${productId}" type="checkbox" aria-label="Checkbox for following text input">

input 태그에 type이 'checkbox'이면, 체크박스가 생성된다.

---

장바구니에 담긴 상품 가져올 때, client storage에 저장

window.localStorage.setItem('productIdList', productIdList);

productIdList라는 key값을 가지는 productIdList(array) 저장!

---

장바구니 모든 목록 가져오기

 

📄 front

function showProductsInCart() {
    $("#products-in-carts").html("");
    $.ajax({
            type: "GET",
            url: "/cart",
            data: {},
            success: function (response) {
                let productsInCart = response["cart"];
                let productIdList = [];
                for (let i = 0; i < productsInCart.length; i++) {
                    let image = productsInCart[i].products.image;
                    let name = productsInCart[i].products.name;
                    let price = productsInCart[i].products.price;
                    let quantity = productsInCart[i].quantity;
                    let productId = productsInCart[i].products.productId;
                    productIdList.push(productId);
                    makeCart(image, name, price, quantity, productId);
                }
                window.localStorage.setItem('productIdList', productIdList);
                if (productsInCart.length){
                    makeBnt();
                }
            }
        });
}

---

체크박스 항목 삭제

 

📄 front

function deleteSelectedProduct() {
    let testList = window.localStorage.getItem('productIdList').split(',')

    let delArray = []

    for(let i=0; i<testList.length; i++){
        if($(`#check-box-${testList[i]}`).is(":checked") === true){
            delArray.push(testList[i]);
        }
    }

    $.ajax({
            type: "DELETE",
            url: "/del/checked",
            traditional: true,	// ajax 배열 넘기기 옵션!
            data: { "checkedList" : delArray },
            success: function (response) {
                if (response['result'] == 'success') {
                    alert('선택 항목 삭제 완료!');
                    window.location.reload();
                }
            }
        });
}

체크박스가 체크되어 있다면, 체크된 productId값을 배열로 전달!

ajax 통신할 때는 객체로 값을 전달해야 한다!!

또한 배열 넘기는 옵션도 추가해줘야 한다.

 

📄 back

// 장바구니 선택항목(check box) 삭제
router.delete('/del/checked', async(req, res) => {
    // const { userId } = res.locals.user;
    const { checkedList } = req.body;

    console.log(checkedList.length);

    if(checkedList.length === 1){
        await cart.destroy({
            where: {
                // userId,
                productId : checkedList,
            }
        });
        return res.send({result: 'success'});
    }


    await cart.destroy({
        where: {
            // userId,
            productId : { [Op.in]: checkedList }, // 배열 요소 중 하나
        },
    });

    res.send({result: 'success'});
});

체크박스 항목이 하나일때, 자꾸 오류 발생.

아무래도 Op.in 옵션이 배열 요소 중 하나만 삭제하는 것인데,

배열 형태로 값을 전달해도 req.body하면 요소 하나만 딱 나온다.

값이 하나일때는... 이부분 조금 더 수정이 필요해보인다.

 

---

체크박스 선택항목 삭제

 

구현해보고 싶은 기능이었는데, 구현이 되긴 했다!!!

 

이제 3계층으로 나누는걸 하고~

총 수량, 총 금액, 주문하기 버튼을 생성하는 것 까지 해봐야겠다.