[jQuery] :checked / checkbox, radio / 선택 값, 인덱스 조회하기

seulki·2022년 10월 2일

jquery

[jQuery]

목록 보기

22/30

🎈:checked

여러 개의 항목 중에서 선택된 항목을 의미하는 셀렉터인 :checked를 사용하여 선택된 요소에 접근한다.
checkbox는 여러 개의 항목 중에서 복수 선택이 가능한 요소이기 때문에, 접근한 요소는 유사 배열 형태가 된다.
-> 반복문으로 항목 가져와야 함

🎈checkbox : HTML

<body>    
    <form id="myform" >
        <label><input type='checkbox' class='hobby' value="soccor">축구</label>
        <label><input type='checkbox' class='hobby' value="basketball">농구</label>
        <label><input type='checkbox' class='hobby' value="baseball">야구</label>
        <button type='submit'>입력값 확인</button>
        <hr />
        <div id="result"></div>
    </form>

🎈checkbox : jquery

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
       $("#myform").on("submit", function(e){
          e.preventDefault();

          let checkList = $(".hobby:checked");

          //배열의 길이가 0이라면 선택된 항목이 없다는 의미이므로 중단
          if(checkList.length == 0){
              alert("선택된 항목이 없습니다.");
              return false;
           }

          for(let i = 0; i <checkList.length; i++){
              let val = $(checkList[i]).val();
              $("#result").append("<div>선택한 항목 : " + val+"</div>");
          }    

       })
  </script>