jquery 선택이 확인되지 않았습니다.

jQuery는 JS에서 가장 인기 있는 도구 중 하나이며 웹 페이지에서 DOM 요소를 처리하는 데 도움이 되는 간단하고 사용하기 쉬운 여러 가지 방법을 제공합니다. 양식을 처리할 때 양식 요소에서 선택한 라디오 및 체크박스 요소를 선택해야 하는 경우가 많습니다. 하지만 가끔 이런 상황이 발생합니다. 양식에서 확인된 속성이 없는 요소를 선택하는 방법은 무엇입니까?

먼저 양식 요소의 상태를 이해해야 합니다. 라디오 버튼과 체크박스의 경우 체크된 상태입니다. 이 상태는 true 또는 false일 수 있습니다. 체크하면 true이고, 그렇지 않으면 false입니다. DOM에서는 selected 속성을 통해 액세스할 수 있습니다.

라디오 버튼의 경우 하나만 선택됩니다. 다음 HTML 코드는 두 개의 라디오 버튼으로 구성된 양식 요소입니다.

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

checked 속성에 액세스하면 선택한 라디오 버튼 요소를 찾을 수 있습니다.

var selectedRadio = $('input[name="gender"]:checked');

체크 상자의 경우 여러 선택 항목이 있을 수 있습니다. 다음 HTML 코드는 두 개의 확인란으로 구성된 양식 요소입니다.

<input type="checkbox" name="interest" value="music" checked>音乐
<input type="checkbox" name="interest" value="sports">运动

selected 속성에 액세스하여 선택한 확인란 요소를 찾을 수 있습니다.

var selectedCheckbox = $('input[name="interest"]:checked');

그러나 양식 요소에 selected 속성이 없는 경우 어떻게 해야 합니까? 하다? ?

방법 1: 선택기의 :has() 의사 클래스 사용

jQuery 선택기의 :has() 의사 클래스를 사용하면 특정 하위 요소가 있는 상위 요소를 선택할 수 있습니다. check된 속성이 없는 라디오 버튼과 체크박스의 경우 :not() 의사 클래스를 사용하여 필터링한 다음 :has() 의사 클래스를 사용하여 상위 요소를 선택할 수 있습니다.

예를 들어 다음 HTML 코드가 있습니다.

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

다음 코드를 사용하여 선택되지 않은 라디오 버튼의 상위 요소를 선택할 수 있습니다.

var unselectedRadioParent = $('input[name="gender"]:not(:checked)').parent();

마찬가지로 체크박스 요소의 경우에도 비슷한 접근 방식을 사용할 수 있습니다.

var unselectedCheckboxParent = $('input[name="interest"]:not(:checked)').parent();

:not() 의사 클래스 선택기가 상대적으로 성능 집약적이라는 점은 주목할 가치가 있습니다. 따라서 양식에 라디오 버튼이나 체크박스 요소가 많은 경우 두 번째 방법을 사용하는 것이 좋습니다.

방법 2: filter() 방법을 사용하세요.

filter() 방법은 주어진 선택기나 함수와 일치하는 요소 모음을 필터링하는 데 사용됩니다. filter() 메소드를 사용하여 선택된 모든 라디오 버튼이나 체크박스 요소를 필터링한 다음 not() 메소드를 사용하여 다른 요소를 필터링할 수 있습니다.

예를 들어, 다음 라디오 버튼 그룹의 경우 다음 코드를 사용하여 선택되지 않은 라디오 버튼 요소를 선택할 수 있습니다.

var unselectedRadio = $('input[name="gender"]').not(':checked');

마찬가지로 다음 확인란 그룹의 경우 다음 코드를 사용하여 선택되지 않은 확인란을 선택할 수 있습니다. 상자 요소:

var unselectedCheckbox = $('input[name="interest"]').not(':checked');

요약

양식 요소에서는 선택된 라디오 버튼과 체크박스 요소를 선택해야 하는 경우가 많습니다. 양식 요소에 selected 속성이 없으면 선택기의 :has() 의사 클래스 또는 filter() 메서드를 사용하여 선택되지 않은 라디오 버튼과 확인란 요소를 선택할 수 있습니다. 이러한 방법을 사용하면 양식을 처리할 때 보다 유연한 선택을 할 수 있으므로 다양한 상황에서 양식을 쉽게 처리할 수 있습니다.

위 내용은 jquery 선택이 확인되지 않았습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!