[Script] 체크박스

내가 (체크)선택한 순서대로 입력되도록.
최근에 선택한 것이 가장 나중에.
체크 해제하면 그 내용만 삭제
체크하면 아래에 체크한 내용 텍스트 써주기
수동으로 개별체크했을 때 전제도 자동으로 체크되고, 하나만 체크 풀어도 체크해제되게
체크 개수가 4이하, 9일 떄 버튼 누르면 성공 alert

 

기능 구현하며 새로 배운 내용

• $(선택자).arrt("속성 이름","속성 값")와 $(선택자). removeAttr("속성 이름")은  jQuery 1.6 이전 버전에서는 동작했지만, 최신 버전에서는 .prop() 메서드를 사용해야함
• 속성 추가 예시: $("#allChk").prop("checked", true);
• 속성 제거 예시:  $("#allChk").prop("checked", false);
• 제이쿼리에서 태그로 선택해서 반복하기 + 첫번째값 제외 + if 조건에 만족하면 click이벤트 일어나게 하기

$("input[type='checkbox']").not(":first").each(function () {
         if (!$(this).is(":checked")) {
         $(this).trigger("click");
     }
});

 

화면 예시

 

JQuery

$(function () {

    // let isAllChecked = false;
    let checkedCount = 0;

    //전체 체크박스를 제외하고 checked타입의 input에 click 함수 넣기(textarea관련)

    $("input[type='checkbox']").not(":first").on("click", function() {
        ckeckedAndTextare($(this));
    });


    function ckeckedAndTextare (element){

        if(element.is(":checked")) {
             //체크 되었을 때 textArea에 추가
            $("#regionText").val($("#regionText").val()+element.val()+" ");
            //체크개수 추가
            checkedCount = checkedCount+1;
            //이번 체크로 전체 체크가 되는거라면
            if(checkedCount==9){
                $("#allChk").prop("checked", true);
            }
        } else {
            //체크되지 않았을 때 글자 삭제
            let textAreaVale = $("#regionText").val();
            //체크 감소
            checkedCount = checkedCount-1;
            $("#regionText").val(textAreaVale.replace(element.val()+" ",""));
            // 이번 체크 해제로 전체가 풀리게 되는거라면 전체 버튼 checked 지워주기
            if(checkedCount!=9){
                $("#allChk").prop("checked", false);
            }
        }

    }



    // 전체 버튼을 누르면 체크되지 않은 태그를 확인하고 click 함수를 실행한다.
    $("#allChk").on("click", function () {
        if ($("#allChk").is(":checked")) {

            // 전체 checked이면 checked false인 것들을 true로
            $("input[type='checkbox']").not(":first").each(function () {
                if (!$(this).is(":checked")) {
                    $(this).trigger("click");
                }
            });


        } else {

            // 전체 checked 아니면 checked true인 것들을 false로
            $("input[type='checkbox']").not(":first").each(function () {
                if ($(this).is(":checked")) {
                    $(this).trigger("click");
                }
            });

        }
    });


    //확인 버튼
    $("#btn").click(function (){
        if(checkedCount<4||checkedCount==9){
            alert("[성공] 체크 카운트 : "+checkedCount);

        } else {
            alert("[실패] 체크 카운트 : "+checkedCount);

        }
    });


});