jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자
:checked
는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option
)를 선택하는 선택자이다.
예제 1 - 라디오 버튼
- 색을 선택하면,
div
요소의 배경색을 바꾼다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } div { margin: 30px 0px; padding : 30px 60px; border: 5px solid #dadada; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'input' ).change( function() { var backgroundColor = $( 'input:checked' ).val(); $( 'div' ).css( 'background-color', backgroundColor ); } ); } ); </script> </head> <body> <p>Color</p> <label><input type="radio" name="color" value="blue"> Blue</label> <label><input type="radio" name="color" value="green"> Green</label> <label><input type="radio" name="color" value="red"> Red</label> <div>Color</div> </body> </html>
예제 2 - 체크박스
- 체크박스에 체크하면 라벨의 글자색을 바꾼다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } label { color: #888888; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'input' ).change( function() { $( 'label ' ).has( 'input' ).css( 'color', '#888888' ); $( 'label ' ).has( 'input:checked' ).css( 'color', '#000000' ); } ); } ); </script> </head> <body> <p>Color</p> <label><input type="checkbox" name="color" value="blue"> Blue</label> <label><input type="checkbox" name="color" value="green"> Green</label> <label><input type="checkbox" name="color" value="red"> Red</label> </body> </html>
예제 3 - 선택 목록
- 색을 선택하면 그 값을
div
요소의 배경색으로 만든다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; font-size: 20px; } div { margin: 30px 0px; padding : 30px 60px; border: 5px solid #dadada; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'select' ).change( function() { var backgroundColor = $( 'option:checked' ).val(); $( 'div' ).css( 'background-color', backgroundColor ); } ); } ); </script> </head> <body> <select> <option></option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red">Red</option> </select> <div>Color</div> </body> </html>