jQuery Selector :checked

Programming

jQuery Selector :checked

알 수 없는 사용자 2018. 3. 11. 22:45

:checked는 checkbox, radio, select box의 option에 대해 체크가 된 요소들을 찾습니다.

예제)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checked demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
 
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
 
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
</form>
<div></div>
 
<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};
countChecked();
 
$( "input[type=checkbox]" ).on( "click", countChecked );
</script>
 
</body>
</html>

실행 결과)

설명)

일단 스크립트를 부분만 보면 countChecked를 function을 만들면서,

상단 var n = $( "input:checked" ).length; 이건 input 태그요소들 중에 체크(:checked)가 된 요소의 개수를 찾아 n 변수에 담은 후

$( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );

div에 체크된컨포넌트가 1개이면 1 is checked!! 2개 이상이면 2 are checked!라는 text를 뿌리게 되어 있습니다.

물론 시작하면서 countChecked() 함수를 호출하게끔 되어 있구요.

추가적으로 checkbox들을 클릭해 보세요. checkbox에 click 이벤트가 발생하면 countChecked를 호출하게끔 아래처럼 선언되어 있습니다.

$( "input[type=checkbox]" ).on( "click", countChecked );

참고로 input 태그에 checked를 선택할 때는 그냥 끝에 checked를 선언하거나 checked="checked"라고 선언하면 됩니다.

'Programming' 카테고리의 다른 글

자바에서 문자열을 반복하는 간단한 방법 (0)	2020.02.10
jQuery Selector (“parent > child”) (0)	2018.03.11
jQuery Selector :animated (0)	2018.03.11
jQuery Selector 지정 문자열로 시작하는 요소 찾아봅시다 (0)	2018.03.09
jQuery Selector :checkbox (0)	2018.03.09

현재글jQuery Selector :checked

procodes