すべてのチェックボックスをオンにするには？

Question

リンクボタンをトリガーしてクリックしたときにすべてのチェックボックスをチェックする方法を理解しようとしています。ボタンをクリックすると、警告メッセージは表示されますが、チェックボックスは表示されません。私はこのサイトに記載されているいくつかの回答を試みましたが、動作しません。私はjsfiddleで問題を再現しました。

HTML：

<h3><a href="javascript:void(0);" id="checkAll">Check</a> All</h3> 
<hr/> 
<input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/> 
<input class="categories" type="checkbox" name="filter" value="Science" checked>Science<br/> 
<input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading 

JS：

$('#checkAll').click(function() 
{ 
    alert("checkAll was clicked!"); 
    console.log("Checkboxes has been refilled!"); 
    $(':checkbox.categories').prop('checked', $(this).checked); // re-check all checkboxes 
    //$("input:checkbox").prop('checked', $(this).prop("checked")); 
}); 

Answer 1

thisがa要素を参照するので、問題があると、その要素を含むjQueryオブジェクトにはchecked性質を持っていません。代わりに、ちょうどtrueに設定します。

$('#checkAll').click(function(e) { 
    e.preventDefault(); 
    $(':checkbox.categories').prop('checked', true); 
}); 

Updated fiddle