input 요소 선택

개발/jQuery 2017. 7. 12. 10:53

<!DOCTYPE html>
<html lang="ko">

<head>
 <meta charset="UTF-8">
 <title>jQuery Element Selection</title>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script>
  $(function() {
   $("button").on("click", function() {
    // 체크되어 있는 요소를 모두 선택함.
    $(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
   });
  });
 </script>
</head>

<body>

 <h1>Form 요소의 선택</h1>

 <form>
  <input type="checkbox" name="lecture" value="html"> <span>HTML</span> <br>
  <input type="checkbox" name="lecture" value="css"> <span>CSS</span> <br>
  <input type="checkbox" name="lecture" value="javascript"> <span>자바스크립트</span> <br>
  <input type="checkbox" name="lecture" value="jquery" checked> <span>제이쿼리</span>
 </form>
 <button>필터링</button>
 
</body>

</html>

 

위 소스에서 버튼을 클릭하면 체크 되어 있는 문항들의 텍스트가 변경 된다

 

선택자 설명
:button type 속성값이 "button"인 요소를 모두 선택함.
:checkbox type 속성값이 "checkbox"인 요소를 모두 선택함.
:file type 속성값이 "file"인 요소를 모두 선택함.
:image type 속성값이 "image"인 요소를 모두 선택함.
:password type 속성값이 "password"인 요소를 모두 선택함.
:radio type 속성값이 "radio"인 요소를 모두 선택함.
:reset type 속성값이 "reset"인 요소를 모두 선택함.
:submit type 속성값이 "submit"인 요소를 모두 선택함.
:text type 속성값이 "text"인 요소를 모두 선택함.
:input <input>, <textarea>, <select>, <button>요소를 모두 선택함.
:checked type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택함.
:selected <option>요소 중에서 선택된 요소를 모두 선택함.
:focus 현재 포커스가 가지고 있는 요소를 선택함.
:disabled 비활성화되어있는 요소를 모두 선택함.
:enabled 활성화되어있는 요소를 모두 선택함.

 

출처 tcp스쿨

'개발 > jQuery' 카테고리의 다른 글

input 붙여 넣기 방지  (0) 2017.10.17
대표적인 getter 메소드와 setter 메소드  (0) 2017.07.12
jQuery 선택자  (0) 2017.07.12
비슷한 ID 가져오기  (0) 2017.07.07
jQuery - select box 선택값 가져오기  (0) 2017.01.18