JavaScript/jQuery를 사용하여 라디오 버튼을 선택 취소하는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-08-31 10:25:02
앞으로
863명이 탐색했습니다.

JavaScript/jQuery를 사용하여 라디오 버튼을 선택 취소하는 방법은 무엇입니까?

때로는 JavaScript나 JQuery를 사용하여 라디오 버튼의 선택을 취소해야 할 때가 있습니다. 예를 들어 양식에서는 라디오 버튼을 사용합니다. 사용자가 양식 지우기 버튼을 누르면 모든 라디오 버튼의 선택을 취소하고 다시 사용자가 라디오 버튼에서 원하는 옵션을 선택할 수 있도록 해야 합니다.

이 튜토리얼에서는 JQuery 또는 JavaScript를 사용하여 단일 또는 다중 라디오 버튼을 선택 취소하는 다양한 방법을 배웁니다.

JavaScript를 사용하여 라디오 버튼 선택을 취소하세요

ID, 태그, 이름 또는 기타 수단을 사용하여 JavaScript의 라디오 버튼에 액세스할 수 있습니다. 그런 다음 잘못된 부울 값을 할당하여 라디오 버튼의 확인된 속성을 선택 취소할 수 있습니다.

문법

사용자는 아래 구문에 따라 확인 속성을 사용하여 라디오 버튼의 선택을 취소할 수 있습니다.

으아아아

위 구문에서 라디오는 JavaScript를 사용하여 액세스되는 라디오 버튼입니다.

예 1

아래 예에서는 라디오 버튼을 만들었습니다. 사용자는 라디오 버튼을 클릭하여 확인할 수 있습니다. 나중에 사용자가 버튼을 클릭하면 ClearRadio() 함수가 호출됩니다.

clearRadio() 함수에서는 라디오 입력의 ID를 사용하여 액세스합니다. 다음으로 라디오 입력의 selected 속성에 액세스하고 잘못된 부울 값을 할당하여 라디오 버튼을 선택 취소합니다.

으아아아

위 출력에서 ​​사용자는 "Uncheck Radio" 버튼을 누를 때마다 라디오 입력이 지워지는 것을 확인할 수 있습니다.

JQuery를 사용하여 라디오 버튼 선택을 취소하세요

JQuery를 사용하여 라디오 입력을 지울 수도 있습니다. JQuery에서는 prop() 메서드를 사용하여 HTML 요소에 대한 속성을 설정할 수 있습니다. prop() 메서드는 속성 이름과 속성 값이라는 두 가지 값을 매개 변수로 사용합니다.

여기에서는 JQuery를 사용하여 특정 라디오 버튼의 선택을 취소하기 위해 속성 이름으로 "checked"를, 속성 값으로 false를 전달합니다.

문법

사용자는 다음 구문에 따라 JQuery의 prop() 메서드를 사용하여 라디오 버튼을 선택 취소할 수 있습니다.

으아아아

위 구문에서는 "checked" 속성 이름을 첫 번째 매개변수로 전달하고 false 속성 값을 두 번째 매개변수로 전달합니다.

예 2

아래 예에서는 라디오 버튼을 만들었습니다. 버튼에서 클릭 이벤트가 발생하면 prop() 메서드를 사용하여 선택한 속성에 false 값을 설정하여 라디오 버튼을 지웁니다.

으아아아

예 3

아래 예에서는 여러 개의 라디오 입력을 생성하고 그룹화했습니다. 따라서 사용자는 4개의 라디오 입력 중 하나를 선택할 수 있습니다. 사용자가 버튼을 클릭하면 모든 라디오 입력이 지워집니다.

여기서 유형과 이름별로 라디오 입력에 액세스합니다. 따라서 사용자가 그룹에서 라디오 입력을 선택하더라도 선택이 취소됩니다.

으아아아

JavaScript와 jQuery를 사용하여 필요할 때 라디오 입력을 지우는 방법을 배웠습니다. 또한 사용자가 양식을 제출할 때 라디오 입력을 지워야 합니다. 사용자는 유형과 이름으로 라디오 버튼 그룹에 액세스한 다음 단일 그룹에 대한 모든 라디오 버튼을 지울 수 있습니다.

위 내용은 JavaScript/jQuery를 사용하여 라디오 버튼을 선택 취소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿