[jQuery] 생성자2: prop() 메서드, attiribute와 property의 차이

 

 

 

1. attiribute와 property의 차이 

• attribute: type, name, class, id, value 등과 같이 속성값을 별도로 입력해야 하는 속성
• property: checked, selected, readonly와 같이 별도로 속성값을 입력하지 않아도 되는 속성

 

 

 

2. prop() 메서드

• prop("속성명"): 해당 속성이 요소에 존재하면 true, 아니면 false
• prop("속성명", true|false): 해당 속성을 checked 또는 selected 상태로 변경(true)/해체(false)
• 호텔의 무료 서비스를 선택할 수 있는 요소를 만들고 고객이 선택한 서비스를 alert창으로 보여준다.

 

<div class="div1">
      <h3>&nbsp;&nbsp; 무료 서비스</h3>
      <ul>
        <li>
          <input type="checkbox" name="servie" value="breakfirst" /> 조식 포함
        </li>
        <li>
          <input type="checkbox" name="servie" value="free parking" /> 무료 주차
        </li>
        <li>
          <input type="checkbox" name="servie" value="free internet" /> 무료
          인터넷
        </li>
        <li>
          <input type="checkbox" name="servie" value="free cancle" /> 무료 취소
        </li>
      </ul>
      <button id="check">선택하기</button>
    </div>
    <script>
      $("#check").on("click", function () {
        // 체크박스 항목을 배열로 저장
        const arr = $("input[name=servie]");
        // 고객이 선택한 항목을 저장할 수 있는 변수를 선언
        let str = "";
        for (i = 0; i < arr.length; i++) {
          console.log(i + " : " + $(arr[i]).prop("checked"));
          //고객이 선택한 항목을 str에 저장
          //prop("속성명") -> 체크된 항목은 true를 반환
          //따라서, 고객이 선택한 항목만 배열에 저장
          if ($(arr[i]).prop("checked")) {
            str += $("arr[i]").val() + " ";
          }
        }
        alert(str + " 선택을 저장하시겠습니까?");
      });
    </script>

😂Whyrano.....? undefined....?