jQuery 셀렉터 :checkbox

development/script

jQuery 셀렉터 :checkbox

알 수 없는 사용자 2018. 3. 9. 16:44

:checkbox는 :button과 동일한 원리로 checkbox type의 컨포넌트들을 찾습니다.

예제)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>checkbox demo</title>
  <style>
  textarea {
    height: 25px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
 
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
 
  <input type="image">
  <input type="password">
  <input type="radio">
 
  <input type="reset">
  <input type="submit">
  <input type="text">
 
  <select>
    <option>Option</option>
  </select>
 
  <textarea></textarea>
  <button>Button</button>
</form>
 
<div></div>
 
<script>
var input = $( "form input:checkbox" )
  .wrap( "<span></span>" )
  .parent()
  .css({
    background: "yellow",
    border: "3px red solid"
  });
 
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// Prevent the form from submitting
$( "form" ).submit(function( event ) {
    event.preventDefault();
});
</script>
 
</body>
</html>

실행결과)

설명)

var input = $( "form input:checkbox" )

.wrap( "<span></span>" )

.parent()

.css({

background: "yellow",

border: "3px red solid"

});

$( "form input:checkbox" ) form 쓰고 한칸 띄었으므로 form 밑에 자식들 중에 input 태그이면서 :checkbox로 된 컨포넌트를 찾아서

wrap 감싸라 뭐로? <span></span>으로 감싸라.

그런 다음 parent() 감싼 checkbox의 부모 객체, 즉 <span>에게 노란색 바탕에 3픽셀의 빨간색 선으로 스타일을 줘라. 라는 뜻이 되겠습니다.

적용 전>

적용 후>

끝에 div를 찾아 text 즉 본문 내용을 넣고 글자색을 빨간색으로 해라. 되겠습니다.

로그인이나 회원가입 화면에서 input box에 필수 입력 값을 넣지 않거나 잘못 된 값을 넣었을 때,

이런식으로 wrap으로 빨간색 선 감싸고 하단에 안내 메시지를 출력하면 딱 좋겠지요~!

'development > script' 카테고리의 다른 글

jQuery Selector 지정한 단어있는 요소 찾기 (0)	2018.03.10
jQuery 셀렉터 :animated (0)	2018.03.09
jQuery 셀렉터 :button (0)	2018.03.09
jQuery 셀렉터 특정 문자열로 시작하는 요소 찾기 (0)	2018.03.09
jQuery 셀렉터 특정 단어로 끝나는 요소 찾기 (0)	2018.03.07

현재글jQuery 셀렉터 :checkbox

big-blog