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):
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).
It probably can go in the main.css if the form has it's own id. I give all forms and tables an id that is really quite specific so that if it's on the page I know exactly what's going on. Combine that with classes etc and you have a lot of control. you also use jquery, right? Pretty easy to select all the checkboxes in the form either by type or by class and then loop through and hide the unchecked options.
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?