여러 개를 선택하는 자바스크립트 다중 선택 상자

JavaScript는 대화형 웹 페이지 및 애플리케이션을 만드는 데 사용할 수 있는 널리 사용되는 스크립팅 언어입니다. 그 중 다중 선택 상자는 웹 개발에서 일반적으로 사용되는 양식 요소로, 사용자가 하나 이상의 옵션을 선택할 수 있도록 해줍니다. 이 글에서는 JavaScript를 사용하여 여러 체크박스를 선택하는 방법을 살펴보겠습니다.

1. HTML 다중 선택 상자의 기본 사용법

HTML에서 다중 선택 상자를 정의하려면 그리고 확인했다. 그 중 name 속성은 다중 선택 상자의 이름을 정의하는 데 사용되며, value 속성은 옵션의 값을 지정하는 데 사용되며, selected 속성은 기본 선택 항목을 설정하는 데 사용됩니다.

예를 들어 다음 코드는 사과, 바나나, 오렌지라는 세 가지 옵션을 포함하는 "과일"이라는 다중 선택 상자를 만듭니다. 여기서 사과는 기본 선택 항목입니다.

<form>
  <input type="checkbox" name="fruits" value="apple" checked>苹果<br>
  <input type="checkbox" name="fruits" value="banana">香蕉<br>
  <input type="checkbox" name="fruits" value="orange">橙子
</form>

사용자는 확인란을 클릭하여 옵션을 선택하거나 선택 취소할 수 있습니다. 사용자가 양식을 제출하면 선택한 옵션이 양식 데이터로 서버에 제출됩니다.

2. JavaScript는 여러 선택 상자를 구현하여 여러 개를 선택합니다.

HTML에서 제공하는 다중 선택 상자 기능은 매우 편리하지만 선택 항목 수를 가져오거나 처리하는 등 클라이언트에서 선택한 옵션을 조작해야 하는 경우도 있습니다. 루프 옵션에서 선택합니다. 이때 JavaScript를 사용하여 선택된 다중 선택 상자의 수를 가져올 수 있습니다.

1. 선택한 다중 선택 상자 수 가져오기

선택한 다중 선택 상자 수를 가져오려면 document.querySelectorAll() 메서드를 사용하여 선택한 다중 선택 상자 요소를 모두 가져오고 그 수를 계산할 수 있습니다. 이 메소드는 지정된 CSS 선택기와 일치하는 모든 요소의 목록을 반환합니다. 예를 들어, 다음 코드는 "fruits"라는 다중 선택 상자에서 선택된 항목 수를 가져옵니다.

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
const checkedCount = checkboxes.length;
console.log(`选中了 ${checkedCount} 个选项。`);

이 코드에서 첫 번째 줄은 먼저 다음을 통해 "fruits"라는 다중 선택 상자에서 모든 항목을 가져옵니다. document.querySelectorAll() 메소드는 요소를 선택하고 이를 NodeList 객체에 저장합니다. CSS 선택기 'input[name="fruits"]:checked'는 선택된 체크박스 요소를 일치시키는 데 사용됩니다. 이 중 name 속성은 선택할 다중 선택 상자의 이름을 지정하며, :checked pseudo-class를 사용하여 선택한 요소를 선택할 수 있습니다.

두 번째 줄은 checkboxes.length를 통해 선택된 체크박스 수를 계산합니다. 마지막으로 console.log() 메서드를 사용하여 결과를 출력합니다.

2. 선택한 다중 선택 상자 처리

선택한 다중 선택 상자를 처리하려면 위와 유사한 코드를 사용하여 선택한 다중 선택 상자 요소를 가져온 다음 루프를 사용하여 선택한 각 요소를 순회할 수 있습니다. . 해당 작업을 수행합니다.

예를 들어, 다음 코드는 다중 선택 상자에서 선택한 요소를 반복하고 해당 값을 문자열에 추가합니다.

const checkboxes = document.querySelectorAll('input[name="fruits"]:checked');
let values = '';
checkboxes.forEach(checkbox => {
  values += checkbox.value + ',';
});
console.log(`选中的选项是：${values}`);

코드는 먼저 선택한 다중 선택 상자 요소 목록을 가져온 다음 forEach() 메서드를 사용하여 선택한 각 요소에 대해 반복합니다. 루프 본문에서 현재 요소의 값을 값 변수에 추가하고 마지막에 결과를 출력합니다.

3. 요약

이번 글에서는 HTML 다중 선택 상자의 기본 사용법을 소개하고, JavaScript를 사용하여 여러 다중 선택 상자를 선택하는 기능을 구현했습니다. 선택된 다중 선택 상자의 수를 가져오고 선택된 다중 선택 상자 요소를 처리함으로써 다중 선택 상자의 기능을 확장하고 복잡한 양식 상호 작용을 구현하기 위한 기반을 제공합니다. 이 기사가 JavaScript를 배우고 사용하여 다중 선택 상자를 처리하는 웹 개발자에게 도움이 되기를 바랍니다.

위 내용은 여러 개를 선택하는 자바스크립트 다중 선택 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!