Hide a checkbox when checked (multiple checkboxes)

How can I hide checkboxes independently when a checkbox is checked. Easy to do for one, but what if I have more than one?

http://jsfiddle.net/DnMK5/49/

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

<div id="ShowMeDIV">
<input type="checkbox" id="MyCheckBox" />
</div>

$('#MyCheckBox').click(function() {
    if ($(this).is(':checked')) {
        $("#ShowMeDIV").hide();
    } else {
        $("#ShowMeDIV").show();
    }
});

Code (markup):

 

With CSS?

 
input[type=checkbox]:checked {
display: none;
} 

Code (markup):

 

It's possible. I prefer using checkboxes over radio buttons even if I have to use javascript to switch between them.

In this case though it probably makes no difference what I use. Pop's idea will work if I put that css in that page (I can't put it in the main .css since it will be affecting all checkboxes).

 

Yeah, that goes in the general CSS, just within an ID or class or something. And, since you can basically style both radio and checkbox however you like, there's really no need in picking one over the other... I have them styled exactly the same (a checkmark being shown when checked/selected) - most of the time, a user doesn't really need to know whether or not they are checkboxes or radio-buttons, as long as the description is accurate (pick as many as you like / pick one).

 

Thought I'd mention. To make inputs work independently without an ID or class you can do something like input[name=YourInputName] in your javascript or jquery code.

 

True, but why would you want to? ALL inputs should have an ID, and that ID is normally the same as the name, so there isn't really that much reason to not just use the ID?