jQuery의 :not() 선택자를 활용한 입력 요소 스타일 변경

아래는 jQuery를 사용하여 선택된 입력 요소 중에서 체크되지 않은(input:not(:checked)) 요소 뒤에 나타나는 span 요소의 배경색을 노란색으로 변경하는 예제입니다.

$( "input:not(:checked) + span" ).css( "background-color", "yellow" );

설명:

1. $() 함수는 jQuery 선택자를 사용하여 HTML 요소를 선택합니다.
2. input:not(:checked)는 체크되지 않은(input:not(:checked)) 모든 입력 요소를 선택합니다.
3. + 연산자를 사용하여 선택된 입력 요소 바로 뒤에 나타나는(span) 요소를 선택합니다.
4. css() 함수를 사용하여 선택된 span 요소의 배경색을 노란색으로 변경합니다.

예제 2: 체크된 입력 요소 뒤에 나타나는 레이블 스타일 변경

$( "input:checked + label" ).css( "color", "blue" );

설명:
이 예제는 체크된(input:checked) 입력 요소 뒤에 나타나는(label) 레이블 요소의 글꼴 색상을 파란색으로 변경합니다.

예제 3: 선택된 입력 요소의 부모 요소 스타일 변경

$( "input:checked" ).parent().css( "border", "2px solid green" );

설명:
이 예제는 체크된(input:checked) 입력 요소의 부모 요소의 테두리를 녹색으로 설정합니다.