어제 오늘 내일

체크박스 선택을 초기화하는 방법입니다. 체크박스 초기화 하기 개 고양이 토끼 function initCheckbox() { // 초기화할 checkbox 선택 const checkboxes = document.getElementsByName('animal'); // 체크박스 목록을 순회하며 checked 값을 초기화 checkboxes.forEach((checkbox) => { checkbox.checked = false; }) } 위 예제는 체크박스를 몇 개 선택한 후, '초기화' 버튼을 클릭하면 선택된 체크박스가 초기화 됩니다. const checkboxes = document.getElementsByName('animal'); 초기화할 체크박스 목록을 선택합니다. getElementsByName()..

체크박스는 2개의 상태를 가집니다. checked unchecked 이번 포스팅에서는 체크박스의 상태를 확인하는 예제를 정리해보았습니다. 체크박스의 체크여부 확인하기 체크하세요 function is_checked() { // 1. checkbox element를 찾습니다. const checkbox = document.getElementById('my_checkbox'); // 2. checked 속성을 체크합니다. const is_checked = checkbox.checked; // 3. 결과를 출력합니다. document.getElementById('result').innerText = is_checked; } checkbox가 선택되었는지 확인하기 위해서 checkbox element를 선택하고,..

체크박스를 활용하는 다양한 방법을 알아보고 있습니다. [HTML] input 태그로 체크박스(checkbox) 만들기` [Javascript] 체크박스(checkbox)에 선택 된 값 출력하기 [Javascript] 체크박스에 체크된 항목 개수 구하기 [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 [Javascript] 체크박스 중, 하나라도 선택해제 될 경우 전체 선택 해제 하는 2가지 방법 체크박스는 보통 다중 선택이 필요할 때 많이 사용됩니다. 만약, 사용자가 여러 개의 항목 중 한 가지만 선택해야 한다면 라디오 버튼을 사용해야 합니다. [HTML] input 태그로 라디오버튼(radio) 만들기 [Javascript] 라디오 버튼(radio) 값 가져와서 출력하기 [Javasc..

지난 번에는 체크박스 목록 전체 선택/전체 선택해제 하는 방법을 알아보았습니다. [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 [Javascript] 체크박스 전체 선택 / 전체 해제 구현하기 체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다. 1. Document.getElementsByName() 활용하기 2. Document.querySelectorAll() 활용하기 1. Document.getElementsByName() 활용하기 Select All.. hianna.tistory.com 그런데, 이전 포스팅의 예제에서는 전체 선택 후, 개별 항목을 선택 해제하여도 전체 선택 항목의 체크박스가 자동으로 선택 해제 되지 않습니다. 이번에는, 개별 항목 중 하나라도 선..

체크박스 전체 선택/전체 해제 구현하는 2가지 방법을 소개합니다. 1. Document.getElementsByName() 활용하기 2. Document.querySelectorAll() 활용하기 1. Document.getElementsByName() 활용하기 Select All 개 고양이 토끼 function selectAll(selectAll) { const checkboxes = document.getElementsByName('animal'); checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }) } (HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.) 위 예제 코드는 'animal'이라는 이름을 가..

라디오 버튼 값을 가져와서 출력하는 2가지 방법을 소개합니다. 1. 라디오 클릭 시, 클릭한 값 바로 출력하기 2. 라디오 버튼 값을 선택한 후, 출력 버튼 클릭시 값 출력하기 먼저, 라디오 버튼을 생성하는 방법은 이전 포스팅을 참조하세요. [HTML] input 태그로 라디오버튼(radio) 만들기 1. 라디오 클릭 시, 클릭한 값 바로 출력하기 여성 남성 function getGender(event) { document.getElementById('result').innerText = event.target.value; } (HTML, JS 탭을 클릭하여 두 소스를 모두 참조하세요.) 먼저 성별을 선택할 수 있는 radio 버튼을 만들었습니다. 각 성별의 value는 'female', 'male' 이..