>source

선택한 모든 확인란의 값을 가져 와서 추가 한 다음 선택한 크기의 값을 추가하는 코드를 작성하는 방법

이것은 HTML 코드입니다. 나는 여전히 자바 스크립트 부분에 대해서는 여전히 희미하다

<form name="order_submit" method="post" action="" onSubmit="">
  <h1>My Pizza Cafe</h1>
  <br>

  <h3>Step 2: Select the pizza you want:</h3>
  <input type="radio" name="pizza" value="15">Small
  <input type="radio" name="pizza" value="20">Medium
  <input type="radio" name="pizza" value="25">Large

  <h3>Step 3: Select the topping you want:</h3>
  <input type="checkbox" name="topping" value="5" onclick="onlyOne(this)"> Pepperoni
  <input type="checkbox" name="topping" value="7" onclick="onlyOne(this)"> Sausage
  <input type="checkbox" name="topping" value="5" onclick="onlyOne(this)"> Mushroom <br>
  <input type="checkbox" name="topping" value="4" onclick="onlyOne(this)"> Pineapple
  <input type="checkbox" name="topping" value="4" onclick="onlyOne(this)"> Black Olives
  <input type="checkbox" name="topping" value="7" onclick="onlyOne(this)"> Meatball
  <br><br>
  <input type="submit" name="send" value="Submit Order">
  <input type="reset" value="Clear Entries">
</form>


  • 답변 # 1

    여기에 jQuery가 있습니다. 체크하면 더하고 다시 체크 해제하면 뺍니다. 오류 처리 등은 귀하에게 달려 있습니다

    이것은 다른 솔루션 아이디어의 혼합입니다 :

    토핑을 통해 항상 현재 값을 업데이트합니다. 현재 총계를 표시 할 때 유용합니다.

    양식 제출시 합계를 계산하십시오. 그런 다음 모든 확인란을 반복하고 값을 요약해야합니다.

    let toppingsValue = 0;
    $("input[type='checkbox']").change(function() {
      if (this.checked) {
        toppingsValue += parseInt(this.value);
      } else {
        toppingsValue -= parseInt(this.value);
      }
    });
    $("form").submit(() => {
      const selectedPizza = $("input[name='pizza']:checked");
      const total = toppingsValue + parseInt(selectedPizza.val());
      alert("total: " + total);
    })
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form name="order_submit" method="post" action="">
      <h1>My Pizza Cafe</h1>
      <br>
    
      <h3>Step 2: Select the pizza you want:</h3>
      <input type="radio" name="pizza" value="15">Small
      <input type="radio" name="pizza" value="20">Medium
      <input type="radio" name="pizza" value="25">Large
    
      <h3>Step 3: Select the topping you want:</h3>
      <input type="checkbox" name="topping" value="5"> Pepperoni
      <input type="checkbox" name="topping" value="7"> Sausage
      <input type="checkbox" name="topping" value="5"> Mushroom <br>
      <input type="checkbox" name="topping" value="4"> Pineapple
      <input type="checkbox" name="topping" value="4"> Black Olives
      <input type="checkbox" name="topping" value="7"> Meatball
      <br><br>
      <input type="submit" name="send" value="Submit Order">
      <input type="reset" value="Clear Entries">
    </form>
    
    

관련 자료

  • 이전 postgresql에서 2000 년 1 월 1 일 이후의 나노초를 타임 스탬프로 변환
  • 다음 ajax - node/express를 사용하여 웹 페이지를 동적으로로드하는 경우 동일한 페이지에서 렌더링해야합니다