본문 바로가기
웹 개발/JavaScript

[Web_JavaScript] 19

유리rr 2022. 5. 15. 15:43

실습(jQuery 체크박스(1))

- 전체 동의 체크박스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 체크박스</title>
</head>
<body>
    <form action="" name="myForm"> 
        <div>
            <label>
                전체 동의
                <input type="checkbox" class="all">
            </label>
        </div>
        <div>
            <label>
                서비스 이용약관 동의
                <input type="checkbox" name="term1" class="term">
            </label>
        </div>
        <div>
            <label>
                정보 수집 동의
                <input type="checkbox" name="term2" class="term">
            </label>
        </div>
        <div>
            <label>
                마케팅 수신 동의
                <input type="checkbox" name="term3" class="term">
            </label>
        </div>
    </form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const $all = $(".all");
    const $terms = $(".term")

    $all.click(function(){
        if($(this).is(":checked")){
            $terms.prop("checked", true);
        }else{
            $terms.prop("checked", false);
        }
    })

</script>
</html>

 

결과(전체 동의 체크 해제)
 
결과(전체 동의 체크)

 

 

 

 

실습(jQuery 체크박스(2))

- 문제

// 하나의 약관이라도 해제가 된다면 전체 동의 체크 해제
// 각 항목이 모두 체크되면 전체 동의 체크

 

 

- 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 체크박스</title>
</head>
<body>
    <form action="" name="myForm">
        <div>
            <label>
                전체 동의
                <input type="checkbox" class="all">
            </label> 
        </div>
        <div>
            <label>
                서비스 이용약관 동의
                <input type="checkbox" name="term1" class="term">
            </label>
        </div>
        <div>
            <label>
                정보 수집 동의
                <input type="checkbox" name="term2" class="term">
            </label>
        </div>
        <div>
            <label>
                마케팅 수신 동의
                <input type="checkbox" name="term3" class="term">
            </label>
        </div>
    </form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const $all = $(".all");
    const $terms = $(".term")

    $all.click(function(){
        if($(this).is(":checked")){
            $terms.prop("checked", true);
        }else{
            $terms.prop("checked", false);
        }
    });

    $terms.on('click', function(){
        if(!$(this).is(":checked")){
            $all.prop('checked', false);
        }

        // $('선택자').filter("선택자")
        // filter를 통해 전달한 선택자로 걸러낼 수 있다.
        // 조건식이 true인 객체만 추출한다.
        if($terms.filter(":checked").length == 3){
            $all.prop('checked', true);
        }

    });
</script>
</html>

 

결과(모두 체크 시 전체 동의 체크)
 
결과(모두 체크된 상태에서 하나라도 해제 시 전체 동의 체크 해제)

 

 

 

 

실습(JavaScript를 jQuery로 변경)

1. [Web_JavaScript] 13의 task01.js 변경

let $tempTr;
let tempText;

function confirm(){
    // const input = document.getElementById("input").value;
    const input = $("#input").val();
    // const trs = document.querySelectorAll("tbody tr");
    const $trs = $("tbody tr");
    let check = false;

    if($tempTr){ 
        // tempTr.style.background = "#fff";
        $tempTr.css("background", "#fff");
        // tempTr.firstElementChild.innerHTML = tempText;
        $tempTr.children().first().text(tempText);
    }

    $.each($trs, function(i, tr){
        let $td = $(tr).children().first();
        if($td.text() == input){
            $tempTr = $(tr);
            tempText = $td.text();

            $(tr).css("background", "#ef5350");
            $td.text("★" + input);
            check = true;
        }
    });

    // trs.forEach(tr => {
    //     let td = tr.firstElementChild;
    //     if(td.innerHTML == input){
    //         tempTr = tr;
    //         tempText = td.innerHTML;

    //         tr.style.background = "#ef5350";
    //         td.innerHTML = "★" + input;
    //         check = true;
    //     }
    // });

    if(!check){
        alert("다시 시도해주세요.");
    }
}

 

 

 

 

2. [Web_JavaScript] 14의 task02 변경

- task02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자를 한글로 변경</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="task02.css">
</head>
<body> 
    <div id="round">1</div>
    <fieldset>
        <legend>숫자를 한글로 변경</legend>
        <p id="result">결과 표시 부분</p>
        <input type="text" name="input">
        <br>
        <button id="change">변경</button>
    </fieldset>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <!-- 추가된 부분 -->
<script src="task02.js"></script>
</html>

 

 

- task02.js

// ["공", "일", "이",... , "구"] 배열이 필요하다
// "공일이삼사오육칠팔구"
// 입력받은 정수의 자리수 분리
// 각 자리수 정수가 위 배열의 인덱스번호로 활용

// 변경 버튼 클릭 시 준비한 getResult() 실행
// document.getElementById("change").onclick = getResult;
$("#change").click(getResult);

// 외부에서 사용자가 입력한 숫자를 전달받는다.
function changeToHangle(number){
    // const pTag = document.getElementById("result");
    const $pTag = $("#result");
    // const div = document.getElementById("round");
    const $div = $("#round");
    
    let hangle = "공일이삼사오육칠팔구";
    let result = "";
    // 1보다 작은 실수가 들어왔는 지 체크
    let check = false; 

    // 숫자가 아닌 다른 문자를 작성했을 때
    if(isNaN(number)){
        // pTag.innerHTML = "숫자만 입력해주세요.";
        $pTag.text("숫자만 입력해주세요.")
        // div.innerHTML = "4";
        $div.text("4");
        return;
    }

    // 실수 중 1보다 작은 값이 들어왔다면,
    if(number < 1){
        // 영을 먼저 붙여준다.
        result += "영";
        check = true;
    }

    // 실수든 정수든 우선 3으로 표기한다.
    // div.innerHTML = "3";
    $div.text("3");

    // 사용자가 입력한 숫자의 자리수만큼 반복한다.
    for(let i in number){
        if(check){ // 위에서 영을 붙였다면, 공이 붙지 않도록 continue를 사용한다.
            check = false; 
            continue;
        }

        // 각 자리수를 처음부터 순서대로 접근하여 (number.charAt(i)),
        // hangle 문자열의 인덱스로 사용한다.
        // 해당 인덱스에는 한글이 있기 때문에 data에 차례로 누적 연결한다.
        let data = hangle[number.charAt(i)];
        if(!data){ // 마침표(점)가 있을 경우 undefined이기 때문에 false이다.
            result += "점"; // undefined를 "점"으로 변경한다.
            // div.innerHTML = "2";
            $div.text("2");
            continue;
        }
        result += data;
    }
    // pTag.innerHTML = result;
    $pTag.text(result);
}

function getResult(){
    // const input = document.querySelector("input[name='input']").value;
    const input = $("input[name='input']").val();
    changeToHangle(input);
}

 

 

 

 

저작자표시 비영리 변경금지

'웹 개발 > JavaScript' 카테고리의 다른 글

[Web_JavaScript] 18  (0) 2022.05.14
[Web_JavaScript] 17  (0) 2022.05.13
[Web_JavaScript] 16  (0) 2022.05.12
[Web_JavaScript] 15  (0) 2022.05.11
[Web_JavaScript] 14  (0) 2022.05.10

'웹 개발/JavaScript' Related Articles

티스토리툴바