選擇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屬性適用於第一個實例，但其餘部分失敗。接下來，你需要稍微修改你的邏輯。我已經包含了一個例子。觀察javascript函數。最後，你應該使用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>