728x90
728x90
자바스크립트 name으로 값 가져오기
- name 속성은 폼 요소에서 자주 사용됩니다. 같은 이름을 가진 여러 요소를 그룹화할 때 유용합니다.
사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('getSelectedBtn').addEventListener('click', function() {
const elements = document.getElementsByName('gender'); // name으로 요소 선택
let selectedValue = '';
for (let i = 0; i < elements.length; i++) {
if (elements[i].checked) { // 선택된 요소인지 확인
selectedValue = elements[i].value; // 선택된 값 가져오기
break;
}
}
console.log(selectedValue); // 선택된 값 출력 (Male 또는 Female)
});
});
</script>
</head>
<body>
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female
<button id="getSelectedBtn">Get Selected Value</button>
</body>
</html>- document.getElementsByName('name'): name 속성값이 동일한 모든 요소 선택(NodeList 반환).
- .checked: 라디오 버튼, 체크박스 등 선택 여부 확인.
- .value: 선택된 요소의 값을 가져옴.
(참고글)
[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리
[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리
목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되
spirit0833.tistory.com
[JavaScript] 자바스크립트 마우스 클릭 이벤트
[JavaScript] 자바스크립트 마우스 클릭 이벤트
목 차1. 마우스 클릭 이벤트란?2. 마우스 클릭 이벤트 종류2-1. mousedown2-2. mouseup2-3. click2-4. dblclick2-5. contextmenu 1. 마우스 클릭 이벤트란?JavaScript에서 마우스 클릭 이벤트는 사용자가 웹 페이지에서
spirit0833.tistory.com
728x90
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 textContent 사용법과 주의사항 (90) | 2024.12.15 |
|---|---|
| [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 (93) | 2024.12.14 |
| [JavaScript] 자바스크립트 class로 값 가져오기 (122) | 2024.12.10 |
| [JavaScript] 자바스크립트 id로 값 가져오기 (136) | 2024.12.10 |
| [JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) (75) | 2024.12.07 |