코딩뉴비
121
2020-04-22 17:37:08
3
150

j 쿼리 체크박스 부분 질문입니다.



위에처럼 결과를 만들고싶습니다 .

<!doctype html>
<html lang="ko">
   <head>
      <meta charset="utf-8">
      <title>quize02</title>
      <script src="http://code.jquery.com/jquery-3.5.0.min.js"></script>
      <script>
          $(document).ready(function (){            
              $('#clik').click(function(){
                    var price=0;
                $('input:checkbox:checked').each(function(){
                   
                    if($(this).is('#a-1')){
                      
                        price+= a.value*2000;
                      
                    }
                    else if ($(this).is('#b-1')){
                        price+=b.value*2500;
                    }
                    else if ($(this).is('#c-1')){
                        price+=c.value*2500;
                    }
                    else if($(this).is('#d-1')){
                        price+=d.value*2800;
                    }

                })
              
                $('#out').text("총 결제 금액:"+price+"원");
             
              

              })

              
             
          })          
      </script>
<style>

</style>
      
      </head>
      <body>
<div>메뉴</div>
<form>
<input type="checkbox" id="a-1">아메리카노(2,000원)<input type="number"  value="0" id="a"/>잔<br>
<input type="checkbox" id="b-1">카페라떼(2,500원)<input type="number"  value="0" id="b"/>잔<br>
<input type="checkbox" id="c-1">핫초코(2,500원)<input type="number"  value="0" id="c"/>잔<br>
<input type="checkbox" id="d-1">카푸치노(2,800원)<input type="number"  value="0" id="d"/>잔<br>

<input type="button" id="clik" value="주문하기">
<div id="out"></div>


</form>


      </body>
독학으로 어느정도 따라왓는데요 . 문제는 출력을 눌렀을경우 총결제금액 가격만 도출하고있습니다 . 어떻게 하면 저 위에 있는 주문한 메뉴 주문한 음료를 출력을 한번에 할수있나요? 조언 부탁드립니다. 
0
0
  • 답변 3

  • 릴보너
    389
    2020-04-22 17:54:52 작성 2020-04-22 17:55:16 수정됨

          <script>

              $(document).ready(function (){            

                  $('#clik').click(function(){

                        var price=0;

    var txt ="";

                    $('input:checkbox:checked').each(function(){

                       

                        if($(this).is('#a-1')){

                          

                            price+= a.value*2000;

                          txt+= "아메리카노:"+a.value*2500+"원\n"

                        }

                        else if ($(this).is('#b-1')){

                            price+=b.value*2500;

    txt+= "카페라떼:"+b.value*2500+"원 \n";

                        }

                        else if ($(this).is('#c-1')){

                            price+=c.value*2500;

    txt+= "핫초코:"+c.value*2500+"원 \n";

                        }

                        else if($(this).is('#d-1')){

                            price+=d.value*2800;

    txt+= "카푸치노:"+d.value*2800+"원 \n";

                        }


                    })

    txt +="총 결제 금액:"+price+"원";

    txt = txt.replace(/(?:\r\n|\r|\n)/g, '<br />');

    $('#out').html(txt);

                  


                  })


                  

                 

              })          

          </script>

    이런방법으로 하시면 될 거 같습니다.

    1
  • 코딩뉴비
    121
    2020-04-22 18:01:11

    죄송합니다만 .이론적으로 설명 부탁드려도 될까요 ? 학습량이 뉴비라서 결과값도 감사합니다만 설명좀 부탁드려도 될까요?

    0
  • 코딩뉴비
    121
    2020-04-22 18:23:17
    @릴보너 님 참고 하여 다풀었습니다 . 감사합니다. 저는 자바스크립터 자바 를 공부해서 선입견이 있어서 그런지 document.write 혹은 println printf 등 밖에 생각이 나지않아 스크립트 안에 텍스트를 입력할수있다는것을 모르고 진행해서 답이없었던것같습니다 . 열심히 열공하겠습니다.
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.