Check multiple boxes without scripting?

Question

I'm building a website where one of the main features is a nice treeview menu used to select values. If a user clicks on a checkbox that has any children in its tree, I want it to check the children of that box. With scripting this is childsplay, of course, but I'm wondering if there's any equivalent to this with pure HTML/CSS?

Basically I want the site to degrade well, but if the user has to select each value by hand it would be quite cumbersome. Is there any way to get this functionality without a script?

EDIT: I realized that, although inconvenient, I could give the non-javascript users a multi-select box that would be a little more effort, but would still get the job done. Thanks so much for all of your input! :D

Answer 1

I am not aware of any way to trigger an event, such as the onclick or onchange, without client side script.

Answer 2

HTML and CSS are not programming languages. They are used for markup and styling. So what you're looking for isn't there.

The best way to do what you want is by adding a little javascript.

Answer 3

pretty sure there is no way to do that without

a) scripting

b) reloading the page

Answer 4

1. Do the whole thing in Flash (Silverlight / Java Applet / etc...)
2. Provide a button next to "parent" checkbox clicking on which would submit the entire form (you need to submit it to preserve the already checked boxes; link won't work here) and do the "checking" server side (e.g. re-render the page with needed boxes already checked).

Scripting doesn't sound so bad now, does it? :-)

Answer 5

Simply, no. CSS is for styling. To listen for the onclick event on the checkbox, it requires Javascript to be enabled.

The only non-script way I can think of is having each checkbox in a form, and after checking the box you either hit enter or click the submit button. You can then set the other checkboxes as checked on page reload using server-side script. Bit of a hack though!

Answer 6

Using a browser without javascript enabled = quite cumbersome

Answer 7

No, there's no way to automatically check additional checkboxes when a single checkbox is clicked without scripting.

If you absolutely want a solution that degrades gracefully if JavaScript is disabled, one approach could be to include an extra checkbox that means "select all child items", without actually checking the children. Here's a somewhat contrived example:

Javascript disabled:

Pick the stuff you like (check all that apply):
[ ] Colors  # Doesn't check all children, since scripting is disabled
   [ ] All colors  # Won't check all boxes, but should be interpreted
                   # by the server as if all color boxes were checked
   [ ] Red
   [ ] Blue
   [ ] Yellow
[ ] Beverages
   [ ] All beverages
   [ ] Tea
   [ ] Coffee
   [ ] Coca-Cola
   [ ] Pepsi

With JavaScript enabled, you could remove the All colors/beverages check boxes and instead add a script that checks all children when a check box is checked:

Pick the stuff you like (check all that apply):
[ ] Colors     # Automatically checks all children
   [ ] Red
   [ ] Blue
   [ ] Yellow
[ ] Beverages  # Automatically checks all children
   [ ] Tea
   [ ] Coffee
   [ ] Coca-Cola
   [ ] Pepsi

In this case I probably wouldn't bother with graceful degradation, though. Those few users that have JavaScript disabled can still check all checkboxes manually, so the application won't be completely broken for them.