Jump to content
Killersites Forums

Checkbox Tree - Javascript?


Recommended Posts

I started learning HTML a couple weeks ago and Javascript last night, so bear with me.

 

My goal:

I want to build a checkbox tree in a form. The tree will have a few levels--let's say Country, State, and City. I can do this easily with nested lists in HTML, but want a few snazzy features:

a) I want to be able to expand or collapse each section of the tree. If I click "United States", I get a list of states. If I then click "Alabama" I get a list of cities in Alabama. (My current code does this, but I want to get rid of the bullets from the list formatting.)

B) Each country/state/city will have a checkbox by it. When I check/uncheck the "Alabama" box, I want it to automatically check/uncheck all of the boxes for Alabama cities--the boxes on that "branch". (I can't figure out how to do this. In fact, I can't figure out how to put checkboxes on any but the bottom/city level.)

c) I want the default setting (when first loaded) to be that the tree is collapsed. Right now, my code makes the default setting and expanded tree.

 

Below is the code I have thus far. Am I on the right track? What functions do I need or where can I find examples of correct checkbox tree code? Any pointers would be appreciated. Thanks.

 

 

>

</pre>
<ul>
</ul>
<a rel="">United States</a><br><br><ul>

</ul>
<a rel="">Alabama</a><br><br><br>Anniston<br><br>Auburn<br><br>Birmingham<br><br>Decatur<br><br>Dothan<br><br>Florence<br><br>Gadsden<br><br>Huntsville<br><br>Mobile<br><br>Montgomery<br><br>Tuscaloosa<br><br><br><br><br><br><ul>
</ul>
<a rel="">Arkansas</a><br><br><br>Fayetteville<br><br>Fort Smith<br><br>Jonesboro<br><br>Little Rock<br><br>Pine Bluff<br><br><br><br

Link to post
Share on other sites

Hi,

 

You are on the right track: the strategy of using the css 'display' property to show and hide elements is the way.

 

But I would stop trying to reinvent the wheel, especially for widgets like this ... it always best to use pre-made components. That said, I would suggest jQuery.

 

Stefan

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...