When you look at the example provided, it becomes clear that the Ajax sample displayed is only for the class 'Ajax,' specifically the 'Shared Event Calendar module for Silverstripe 2.4.'
There is another ajax sample with the class AJAX, but this one does not match because it is case sensitive and does not match 'Ajax.'
AJAX != Ajax
Therefore, your jquery selector will not work due to the case sensitivity issue.
Additionally, I am only able to see 2 samples, not 3?
edit: In the JS that sets up your sample checks, it may be more effective to use
$('.samples :checkbox').each(function () {
instead of
$(':checkbox').each(function () {
as this limits the scope for jquery iteration.
Edit:
To clarify why some samples are hidden, it is related to how your
$(':checkbox').each(...)
Is functioning;
The check controls trigger every time something is clicked and processes all the checkboxes that can be clicked.
Consider a scenario where your layout looks like this:
<div class='samples'>
<div class='asp'>...</div>
<div class='php asp'>...</div>
<div class='php django'>
</div>
If you select the ASP checkbox, it will go through and display sample 1 because it contains ASP, then it goes on to show sample 2 for the same reason, but when it reaches sample 3 without ASP, it hides it.
Then, moving to the PHP checkbox, it starts with sample 2 (due to the .each loop) and since it is not checked, it hides sample 2 even if it was previously shown. The same applies to sample 3.
Do you understand what I'm trying to explain? The subsequent .each iterations are overriding the displays made for the checked box; especially when the checkbox's ID precedes the actual sample in the HTML arrangement.