JavaScript 제어 확인란을 선택하면 두 항목만 선택할 수 있으며 다른 항목은 선택할 수 없습니다.

웹 애플리케이션이 발전하면서 JavaScript는 프론트 엔드 엔지니어에게 필요한 지식 중 하나가 되었습니다. 체크박스는 일반적인 웹 컨트롤 중 하나이며 JavaScript를 사용하여 체크박스의 상호 작용을 제어할 수 있습니다. 이 글에서는 JavaScript를 사용하여 체크박스를 제어하는 ​​방법을 소개합니다. 두 항목만 선택한 후에는 나머지 옵션을 선택할 수 없습니다.

1. HTML 기본

JavaScript를 사용하여 체크박스를 제어하기 전에 먼저 HTML의 체크박스 기본 구문을 이해해야 합니다. HTML의 체크박스는 태그를 사용하여 구현됩니다. type 속성을 "checkbox"로 설정하면 체크박스가 생성됩니다. 예:

<input type="checkbox" name="option1" value="1">

위 코드는 값이 1인 "option1"이라는 확인란을 만듭니다. name 속성을 통해 후속 JavaScript 코드에서 이 확인란을 찾을 수 있고, value 속성을 통해 확인란의 선택된 상태를 가져오거나 설정할 수 있습니다.

2. JavaScript 구현

이제 JavaScript를 사용하여 확인란을 제어하는 ​​방법을 설명합니다. 주요 아이디어는 확인란을 선택하면 선택되지 않은 나머지 확인란이 비활성화된다는 것입니다. addEventListener() 메서드를 사용하여 각 확인란에 클릭 이벤트를 추가한 다음 이벤트 콜백 함수에서 위의 논리를 구현할 수 있습니다.

다음은 구체적인 구현 코드입니다.

// 获取所有复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 选择次数计数器，初始化为0
var checkedCount = 0;

// 遍历所有复选框，为它们添加点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("click", function() {
    if (this.checked) {
      // 如果当前复选框被选中，判断当前是否已选中两项
      if (checkedCount >= 2) {
        // 已选中两项，禁用其余未选中的复选框
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            checkboxes[j].disabled = true;
          }
        }
      } else {
        // 尚未选中两项，计数器+1
        checkedCount++;
      }
    } else {
      // 如果当前复选框被取消选中，计数器-1，检查是否需要解除禁用
      checkedCount--;
      if (checkedCount < 2) {
        for (var j = 0; j < checkboxes.length; j++) {
          checkboxes[j].disabled = false;
        }
      }
    }
  });
}

위 코드에서는 먼저 document.querySelectorAll() 메서드를 사용하여 모든 체크박스 요소를 가져오고 체크된 체크박스의 수를 기록하기 위해 checkCount 카운터를 정의합니다. 그런 다음 모든 체크박스 요소를 반복하고 여기에 클릭 이벤트를 추가합니다. 각 클릭 이벤트 콜백 함수에서는 현재 체크박스가 선택되어 있는지 확인합니다. 선택한 경우 선택한 숫자가 2인지 확인합니다. 2보다 작으면 카운터를 +1하고, 그렇지 않으면 선택되지 않은 나머지 확인란을 비활성화합니다. 확인란이 선택 취소된 경우 -1을 계산하고 선택을 취소해야 하는지 확인합니다.

3. 효과 데모

HTML 페이지에서 위 JavaScript 코드의 효과를 테스트할 수 있습니다. 위 코드를 JavaScript 파일(예: checkbox.js)로 저장한 다음 HTML 페이지에 이 JavaScript 파일을 연결합니다.

<script src="checkbox.js"></script>

그런 다음 HTML 페이지에 여러 확인란을 추가합니다. 예:

<input type="checkbox" name="option1" value="1">选项1

选项2

选项3

选项4

选项5

브라우저에서 이 파일 열기 HTML 페이지에서 여러 개의 확인란을 볼 수 있습니다. 두 개의 확인란을 선택하면 나머지 확인란은 선택할 수 없게 됩니다.

4. 요약

JavaScript는 확인란의 선택 동작 제어와 같은 웹 애플리케이션의 상호 작용을 쉽게 제어할 수 있습니다. 위의 구현 방법은 아이디어 중 하나일 뿐이며 실제로 특정 요구에 따라 조정하고 최적화할 수 있습니다. 이 글이 모든 사람이 웹 애플리케이션 개발에서 JavaScript의 적용과 실행을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 JavaScript 제어 확인란을 선택하면 두 항목만 선택할 수 있으며 다른 항목은 선택할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!