어제 오늘 내일

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

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..

체크박스는 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'이라는 이름을 가..

체크박스를 클릭하여 선택할 때마다, 총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다. 체크박스에 체크된 항목 개수 구하기 개 고양이 토끼 function getCheckedCnt() { // 선택된 목록 가져오기 const query = 'input[name="animal"]:checked'; const selectedElements = document.querySelectorAll(query); // 선택된 목록의 갯수 세기 const selectedElementsCnt = selectedElements.length; // 출력 document.getElementById('result').innerText = selectedElementsCnt; } (HTML, JS 탭을 클릭하여 두 ..

시작하기 전에 체크 박스를 만드는 방법을 잘 모른다면, 먼저 아래 포스팅을 참조하세요. [HTML] inpu 태그로 체크박스(checkbox) 만들기 체크박스(checkbox)에 선택 된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값만 출력하기 2. 체크박스를 선택 했을 때, 선택된 모든 값 출력하기 3. '확인' 버튼을 눌렀을 때 선택된 값 출력하기 1. 체크박스를 선택 했을 때, 선택한 값을 출력하기 체크박스에 클릭 이벤트가 발생했을 때, 선택된 값만 출력하는 예제입니다. 개 고양이 function getCheckboxValue(event) { let result = ''; if(event.target.checked) { result = event.target.value; }else { re..

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