div의 모든 확인란을 선택하십시오.

Question

다음 기능을 사용하여 모든 확인란을 선택/선택 취소하십시오.

$(function() { 
     $("#selectall").click(function() {   
      $('.Employee').attr('checked', this.checked); 
     }); 
     $(".Employee").click(function() { 
      if ($(".Employee").length == $(".Employee:checked").length) { 
       $("#selectall").attr("checked", "checked"); 
      } else { 
       $("#selectall").removeAttr("checked"); 
      } 

     }); 
    }); 

제대로 작동 그것하지만 난/선택할 수 있어요 두 번째 시간 동안 나는 여러 시간을 선택 포기하지 않을/기능의 선택을 해제 그것 page.Means를 다시로드해야, 페이지로드에 처음으로 모든 선택을 취소합니다.

Answer 1

첫 번째 문제는 .prop() 방법으로 해결해야한다는 것입니다. 이것은 javascript checked 속성을 읽습니다. HTML checked 속성을 사용하면 첫 번째 인스턴스에서는 작동하지만 나머지 인스턴스에서는 실패합니다. 다음으로 논리를 약간 수정해야합니다. 예를 들어 보았습니다. 자바 스크립트 기능을 관찰하십시오. 마지막으로 change 방법을 사용하거나 바람직하게는 .on('change', function(){ ... })을 사용해야합니다. 그러나 본인의 예를 원래 게시물에 가깝게 유지하겠습니다.

$(function() { 
 
     $("#selectall").change(function() { 
 
      $('.Employee').prop('checked', this.checked); 
 
     }); 
 
     $(".Employee").change(function() { 
 
      if ($(".Employee").length == $(".Employee:checked").length) { 
 
       $('#selectall').prop('checked', this.checked); 
 
      } else { 
 
       $('#selectall').prop('checked', false); 
 
      } 
 
     }); 
 
    });

label { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label>test 1: <input type="checkbox" class="Employee"></label> 
 
    <label>test 2: <input type="checkbox" class="Employee"></label> 
 
    <label>test 3: <input type="checkbox" class="Employee"></label> 
 
    <label>test 4: <input type="checkbox" class="Employee"></label> 
 
    <label>test 5: <input type="checkbox" class="Employee"></label> 
 
</div> 
 

 
<label>Select All: <input id="selectall" type="checkbox"></label>