> 웹 프론트엔드 > HTML 튜토리얼 > HTML의 라디오 값 획득, 할당, 등록 이벤트 예시에 대한 자세한 설명

HTML의 라디오 값 획득, 할당, 등록 이벤트 예시에 대한 자세한 설명

高洛峰
풀어 주다: 2017-03-03 16:07:09
원래의
3447명이 탐색했습니다.

이 글은 주로 HTML의 라디오 값 획득, 할당 및 등록 이벤트를 소개합니다. HTML을 좋아하는 친구에게는 매우 적합합니다. 1. 라디오 그룹핑

은 이름이 동일한 그룹입니다. 즉, 그룹 내에서 하나만 선택할 수 있습니다.

코드는 다음과 같습니다. 다음과 같습니다:

<span>group1:</span> 
<input type="radio" id="radio1" checked="checked" name="group1" />radio1 
<input type="radio" id="radio2" name="group1" />radio2 
<input type="radio" id="radio3" name="group1" />radio3 
<span>group2:</span> 
<input type="radio" id="radio4" checked="checked" name="group2" />radio4 
<input type="radio" id="radio5" name="group2" />radio5 
<input type="radio" id="radio6" name="group2" />radio6
로그인 후 복사


효과는 다음과 같습니다.
HTML의 라디오 값 획득, 할당, 등록 이벤트 예시에 대한 자세한 설명

2. 선택한 라디오 노드를 가져옵니다.

jquery를 사용하여 쉽게 수행할 수 있습니다. . 먼저 그룹을 선택한 후 다음과 같이 체크된 항목을 필터링합니다.

코드는 다음과 같습니다.

var group1 = $("[name=&#39;group1&#39;]").filter(":checked"); 
console.log(group1.attr("id"));
로그인 후 복사


3.

jquery를 사용하여 확인된 속성을 설정합니다.

코드는 다음과 같습니다.

$("#radio2").attr("checked", "checked");
로그인 후 복사


4 라디오 노드를 선택하려면

확인된 속성을 제거합니다:

코드는 다음과 같습니다:

$("#radio1").removeAttr("checked");
로그인 후 복사

이 결과는 그룹의 라디오 중 어느 것도 선택되지 않을 수 있습니다.

5. 선택된 이벤트와 선택되지 않은 이벤트 등록

또는 jquery의 on 함수를 사용하여 다음과 같이 변경 이벤트를 등록합니다.

코드는 다음과 같습니다. 🎜>

$("[name=&#39;group1&#39;]").on("change", 
function (e) { 
console.log($(e.target).val()); 
} 
);
로그인 후 복사

이런 식으로 그룹 1 중 하나를 선택하면 기능이 실행됩니다.

HTML의 라디오값 획득, 할당, 등록 이벤트 예시에 대한 자세한 설명은 PHP 중국어 홈페이지 관련 글을 참고해주세요!

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