HTML 체크박스와 라디오 버튼 체크박스와 라디오 이벤트 소개_기본 지식

한때 체크박스와 라디오의 이벤트 선택이 나를 혼란스럽게 했습니다.

JS에 대한 나의 이해에 따르면 변경 이벤트가 가장 합리적이어야 한다고 생각합니다. 즉, 변경 이벤트는 변경 후 포커스가 떠날 때만 트리거됩니다.
나중에는 click mousedown과 같은 마우스 이벤트가 대신 사용되었습니다. 저는 마우스다운보다 클릭이 더 완벽하다는 것을 알았습니다.

라디오가 클릭 이벤트를 등록한 후 키보드에서 위, 아래, 왼쪽, 오른쪽을 선택하면 마우스 이벤트가 트리거되고, 스크롤 휠도 작동됩니다. 이 마법 같은 일은 마우스를 누른 상태에서는 발생하지 않습니다. (웹킷은 상하좌우 선택을 사용할 수 없습니다.)
체크박스가 클릭 이벤트를 등록한 후 공백이 있는 체크박스를 선택하면 다시 기적이 발생하고 마우스다운이 발생합니다. 또다시 기적을 놓친다. (웹킷은 여전히 ​​공백을 사용하여 선택할 수 없습니다.)

이 두 사람의 부담을 줄이기 위해 모두 클릭을 사용합시다. 이 두 사람의 경우에는 여러 이벤트를 묶지 마십시오. 클릭은 최고의 전능자입니다. 예배~~

폼을 이용하여 설문지를 디자인할 때, 사용자 작업을 줄이기 위해 HTML의 태그에 선택 상자를 두 개 사용하는 것이 좋습니다. , 즉 단일 선택 상자와 확인란의 차이점은 사용자가 라디오 단추 상자에서 하나의 옵션만 선택할 수 있는 반면 사용자는 확인란에서 여러 옵션을 선택하거나 모든 옵션을 선택할 수도 있다는 것입니다. 다음 예를 살펴보세요.

이 예의 소스 코드는 코드와 결합되어 있으며, 각 매개변수의 설정에 대해 설명합니다.

🎜>여행을 좋아하시나요? 선택하세요:

코드 복사 코드는 다음과 같습니다:

좋아요
싫어요
상관없음

어떤 스포츠에 관심이 있으신가요?

코드 복사 코드는 다음과 같습니다.

공놀이
🎜> 보디빌딩


보시다시피 위의 소스 코드에서 라디오 버튼을 만들려면 태그의 유형 매개변수를 type="radio"로 설정하고, 태그의 유형 매개변수를 설정하세요. ="체크박스"를 입력하세요. 실제 응용프로그램에서 사용되는 선택 상자의 유형은 실제 필요에 따라 결정되어야 합니다. 사용자에게 하나의 선택만 필요한 경우 라디오 버튼을 사용합니다. 예를 들어, "여행을 좋아합니까?" 사용자는 하나의 옵션만 선택할 수 있으므로 사용자가 여러 옵션을 가질 수 있는 경우 라디오 버튼이 사용됩니다. 선택사항, 선택한 콘텐츠에 대해 체크박스를 사용합니다. 예를 들어, 이 예에서는 개인의 관심분야가 다양할 수 있으므로 "어떤 스포츠에 관심이 있습니까?"라는 질문을 사용합니다.

태그에 체크된 매개변수를 설정하면 해당 상자가 기본으로 선택됩니다. 예를 들어, 이 예의 첫 번째 라디오 버튼 상자("좋아요" 아래의 라디오 버튼 상자)는 기본적으로 선택되도록 설정되어 있으므로 사용자가 "좋아요"를 선택하려는 경우 다시 선택할 필요가 없습니다. 물론, 사용자가 "좋아요"를 선택하고 싶다면 "좋아요" 아래의 라디오 버튼을 클릭하기만 하면 기본값이 자동으로 취소됩니다. 동일한 방법을 사용하여 기본적으로 선택되도록 확인란을 설정할 수도 있습니다. 그러나 확인란의 기본 선택을 남용해서는 안 됩니다. 그렇지 않으면 사용자의 분노를 불러일으킬 수 있습니다.

라디오에서는 모든 개체의 이름 속성을 동일하게 설정해야 합니다. 예를 들어 위 예에서는 name="radiobutton"입니다. 이 방법을 통해서만 단일 선택 효과를 얻을 수 있습니다. 그렇지 않으면 위 예의 '좋아요', '무관심'을 동시에 선택할 수 있습니다.