recommendation.ejs 2.35 KB
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/../style.css">
  <title>Test</title>


</head>

<body>
  <h1><a href="/food">점심 메뉴 정하기</a></h1>


  <div class="grid">
    <ul>
      <il><a href="/food/search">검색</a></il><br>
      <il><a href="/food/recommendation">추천</a></il>
    </ul>

    <article>
      <h2>
        <%= title %>
      </h2>
      <p><%= description %></p>
      
      <button id='check_all'>모두 선택</button>
      <button id='uncheck_all'>모두 해제</button>
      <button id='count_check'>체크 수 확인</button>

      <form action='/food/recommendation' method='post'>
        <p>
          가격 :
          <input type="number" name="price" placeholder="price">
        </p>
        <p>
          <input type="checkbox" name="shape" value="밥"></input>
          <input type="checkbox" name="shape" value="면"></input>
          <input type="checkbox" name="shape" value="고기">고기</input>
          <input type="checkbox" name="shape" value="기타">기타</input>
        </p>
        <p>
          <input type="checkbox" name="kinds" value="한식">한식</input>
          <input type="checkbox" name="kinds" value="중식">중식</input>
          <input type="checkbox" name="kinds" value="양식">양식</input>
          <input type="checkbox" name="kinds" value="일식">일식</input>
        </p>
        <p>
          <input type="submit">
        </p>
      </form>


      <script src="//code.jquery.com/jquery.min.js"></script>
      <script>
        $("#check_all").click(function() {
          $("input[name=kinds]:checkbox").prop("checked", "checked");
        });
        $("#uncheck_all").click(function() {
          $("input[name=kinds]:checkbox").removeProp("checked");
        });
        $("#count_check").click(function() {
          alert($("input[name=kinds]:checkbox:checked").length);
        });
        $("#check_all").click(function() {
          $("input[name=shape]:checkbox").prop("checked", "checked");
        });
        $("#uncheck_all").click(function() {
          $("input[name=shape]:checkbox").removeProp("checked");
        });
        $("#count_check").click(function() {
          alert($("input[name=shape]:checkbox:checked").length);
        });
      </script>
    </article>
  </div class="grid">

</body>

</html>