확인란 모두 선택 JavaScript 작성(그래픽 튜토리얼)

亚连
풀어 주다: 2018-05-19 09:38:49
원래의
1373명이 탐색했습니다.

이 글에서는 "모두 선택" 체크박스의 JavaScript 작성을 주로 소개합니다. 관심 있는 친구들은 누구나 더 깊이 이해할 수 있도록 아래의 자세한 설명을 확인하실 수 있습니다. .

모두 선택 상자의 작동에는 두 가지 상황이 있습니다.

1. 모두 선택 상자를 클릭하고 아래의 모두 선택

2.

html style

<tr>
     <td>爱  好</td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label>
     </td>
    </tr>
로그인 후 복사

js style

var oChkAll = document.getElementById("checkAll");
    //全选
    oChkAll.onclick = function() {
     for(var i = 0; i < oFav.length; i++) {
      oFav[i].checked = this.checked;
     }
    }
    //复选框组
    for(var i = 0; i < oFav.length; i++) {
     oFav[i].onclick = function() {
      //如果全选
      if(isChkAll()) {
       oChkAll.checked = true;
      } else {
       oChkAll.checked = false;
      }
     }
    }
    //判断是否全选
    function isChkAll() {
     var all = oFav.length;
     var chk = 0;
     for(var i = 0; i < oFav.length; i++) {
      if(oFav[i].checked) {
       chk++;
      }
     }
     if(all == chk) {
      return true;
     } else {
      return false;
     }
    }
로그인 후 복사

위 내용은 나중에 모두에게 도움이 되기를 바랍니다.

관련 기사:

js

js데이터 분석 기술 요약

JS 프로토타입 및 프로토타입 체인 사용에 대한 자세한 설명

위 내용은 확인란 모두 선택 JavaScript 작성(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿