In the example you've shown, the only Ajax sample it shows when you click Ajax is the one that has the class 'Ajax' which is 'Shared Event Calendar module for Silverstripe 2.4'
You've only got one other ajax sample which has the class AJAX which won't match because it's not a string match with Ajax
AJAX != Ajax
So your jquery selector won't work because it's case sensitive.
Also I can only see 2 samples, not 3 ?
edit: Also, in your JS that wires up your sample checks, it might be better to use
$('.samples :checkbox').each(function () {
rather than
$(':checkbox').each(function () {
as it limits the scope that jquery has to iterate.
Edit:
To explain why some samples are being hidden, it's because of how your
$(':checkbox').each(...)
Is working;
Check controls fires every time you click something and it processes all the checkboxes that can be clicked.
Imagine if your experience looked like this:
<div class='samples'>
<div class='asp'>...</div>
<div class='php asp'>...</div>
<div class='php django'>
</div>
If you click the ASP checkbox, it'll loop through and say, ok show sample 1 because it's got ASP in it, then it'll loop and say show sample 2 because its got ASP in it, then it'll loop once more and see that sample 3 doesn't have ASP in it, so it will hide it.
Then it loops to the next check box (for sake of argument called PHP); it starts at sample 2 (because of the .each loop) and see that it's not checked so it hides the sample 2 even though it was shown before, and same for sample 3.
Do you see what I mean ? the subsequent .each iterations are cancelling out the displays that are done for the checked box; when the ID of the checkbox you selected appears before the actual sample in the HTML layout.
