>웹 프론트엔드 >JS 튜토리얼 >체크박스 전체 선택, 선택 없음 및 역선택_javascript 기술을 구현하는 js 메소드

체크박스 전체 선택, 선택 없음 및 역선택_javascript 기술을 구현하는 js 메소드

WBOY
WBOY원래의
2016-05-16 16:15:091252검색

이 글의 예시에서는 js에서 체크박스의 전체 선택, 비선택, 역선택을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 아이디어:

1. 요소 가져오기

2. 전체 선택, 선택 해제, 반전 선택이 가능한 클릭 이벤트 추가

3. for 루프 체크박스 사용

4. 확인란을 true로 설정하면 모두 선택됩니다.

5. 선택을 취소하려면 확인란을 false로 설정하세요.

6. if 판단을 통해 체크가 true이고 선택된 상태가 설정되면 체크가 false로 설정되고 체크가 해제되면 체크가 true로 설정되고 선택됩니다.

2. HTML 코드:

<input type="button" value="全选" id="sele"/>
<input type="button" value="不选" id="setinterval"/>
<input type="button" value="反选" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

3.js 코드:

<script>
window.onload=function(){

  var sele=document.getElementById('sele');//获取全选
  var unsele=document.getElementById('setinterval');//获取不选
  var clear=document.getElementById('clear');//获取反选
  var checkbox=document.getElementById('checkboxs');//获取div
  var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }

//不选
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反选
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.