jQuery Selector :checkbox

Programming

jQuery Selector :checkbox

알 수 없는 사용자 2018. 3. 9. 17:30

: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으로 빨간색 선 감싸고 하단에 안내 메시지를 출력하면 딱 좋겠지요~!

'Programming' 카테고리의 다른 글

jQuery Selector :animated (0)	2018.03.11
jQuery Selector 지정 문자열로 시작하는 요소 찾아봅시다 (0)	2018.03.09
jQuery Selector 버튼 형식 찾기 (0)	2018.03.09
jQuery Selector 지정 문자열로 끝나는 요소를 찾아보자 (0)	2018.03.09
jQuery Selector 속성값 다른 것 찾기 [name!=”value”] (0)	2018.03.08

현재글jQuery Selector :checkbox

procodes