자바스크립트 모두 선택 취소

JavaScript는 프런트 엔드 웹 개발에 자주 사용되는 널리 사용되는 스크립팅 언어입니다. 웹 개발에서는 모두 선택 및 모두 선택 취소 기능을 구현하는 경우가 많습니다. 이때 일반적으로 JavaScript를 사용해야 합니다. 이 기사에서는 JavaScript를 사용하여 모두 선택 및 모두 선택 해제 기능을 구현하는 방법을 소개합니다.

1. HTML 코드

모두 선택 및 모두 선택 해제 기능을 구현하기 전에 먼저 HTML 코드를 작성해야 합니다. 다음은 테이블 헤더와 내용을 포함하는 HTML 코드의 예입니다.

<div class="tableContainer">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"/>자바스크립트 모두 선택 취소</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>李四</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="checkbox"/></td>
        <td>王五</td>
        <td>30</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>
</div>

테이블 헤더에 모두 선택 체크박스를 추가하고 해당 ID를 다른 행에 있는 각 행의 첫 번째 셀인 "selectAll"로 설정했습니다. 체크박스도 그리드에 추가되고 해당 클래스는 "체크박스"로 설정됩니다.

2. JavaScript 코드

다음으로 함수를 구현하기 위한 JavaScript 코드를 작성해야 합니다. 전체 선택 및 전체 선택 해제 기능을 구현하기 위해서는 테이블 상단의 전체 선택 체크박스와 각 행의 체크박스에 이벤트를 추가해야 합니다. 다음은 JavaScript 코드입니다.

<script>
  // 获取表格头部的자바스크립트 모두 선택 취소checkbox
  var selectAll = document.getElementById("selectAll");
  // 获取每一行中的checkbox
  var checkboxes = document.getElementsByClassName("checkbox");
 
  // 给表格头部的자바스크립트 모두 선택 취소checkbox绑定点击事件
  selectAll.onclick = function() {
    // 循环遍历每一行的checkbox
    for(var i=0; i < checkboxes.length; i++) {
      // 将每一行的checkbox的选中状态设置为表格头部的자바스크립트 모두 선택 취소checkbox的选中状态
      checkboxes[i].checked = selectAll.checked;
    }
  }
 
  // 循环遍历每一行的checkbox
  for(var i=0; i < checkboxes.length; i++) {
    // 给每一个checkbox绑定点击事件
    checkboxes[i].onclick = function() {
      // 定义一个变量，表示是否所有行中的checkbox都被选中
      var isCheckedAll = true;
      // 循环遍历每一行的checkbox
      for(var j=0; j < checkboxes.length; j++) {
        // 如果有一个checkbox没有被选中，将isCheckedAll设置为false
        if(!checkboxes[j].checked) {
          isCheckedAll = false;
          break;
        }
      }
      // 将表格头部的자바스크립트 모두 선택 취소checkbox的选中状态设置为isCheckedAll
      selectAll.checked = isCheckedAll;
    }
  }
</script>

3. 효과 구현

HTML 및 JavaScript 코드가 완성되면 모두 선택 및 모두 선택 해제 기능을 구현할 수 있습니다.

사용자가 표 헤더의 모두 선택 확인란을 선택하면 모든 행의 확인란이 자동으로 선택됩니다.

사용자가 표 헤더의 모두 선택 확인란을 선택 취소하면 다음의 확인란이 자동으로 선택됩니다. 모든 행이 자동으로 선택됩니다. 모든 확인란이 자동으로 선택 취소됩니다.

그리고 사용자가 특정 행의 확인란을 선택하거나 선택 취소하면 테이블 상단에 있는 모두 선택 확인란이 자동으로 선택되거나 선택 취소됩니다. 모든 행의 체크박스 상태에서 Uncheck:

위는 JavaScript를 사용하여 전체 선택 및 전체 선택 취소 기능을 구현하는 방법입니다. HTML과 JavaScript 코드를 작성함으로써 모두 선택 및 모두 선택 취소 기능을 쉽게 구현할 수 있어 웹 페이지의 사용자 경험이 향상됩니다.

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