代碼在jQuery 2.1.4中失敗，但在舊版本中運行良好

Question

我注意到我的代碼在jQuery 2.1.4中不起作用。但在jquery 1.4.3中工作。我已經做了一個代碼，通過檢查主複選框來檢查表中的所有複選框。該代碼適用於前2次點擊，但不能從第三次點擊中運行。 當我使用jquery 1.4.3時，代碼正常工作。 jQuery代碼是 -

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainCheckBox").click(function() { 
      if ($(this).is(":checked")) { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).attr("checked", true); 
       }); 
      } 
      else { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).attr("checked", false); 
       }); 
      } 
     }); 
    }); 
</script> 

有人能給出解決方案失敗的原因在最新的jQuery版本？

Answer 1

您需要使用.prop()，而不是.attr()

在jQuery 1.6中，.prop()方法提供了一種明確檢索屬性值，而.attr()檢索屬性。

$(this).prop("checked", true/false); 

現有代碼可以被優化爲

$(document).ready(function() { 
    $("#mainCheckBox").change(function() { 
     $("#pageTbody input[type='checkbox']").prop("checked", this.checked); 
    }); 
}); 

1. 沒有必要使用.each()
2. 使用change事件而不是click

Answer 2

checked是一個屬性和不是一個屬性，所以你將不得不爲了現在使用.prop得到它的權利：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainCheckBox").click(function() { 
      if ($(this).is(":checked")) { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).prop("checked", true); 
       }); 
      } 
      else { 
       $("#pageTbody").find('input[type="checkbox"]').each(function() { 
        $(this).prop("checked", false); 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 3

用這樣的方式：

$(this).prop("checked", true);