Jump to content
Sign in to follow this  
paulclift

label with checkbox not working - complicated! :-)

Recommended Posts

I am trying to make a checkbox work with a label which is INSIDE an <a href> ..,the label function isn't working because of both the separate <div> in which it appears and also because of the anchors. Is there are work-around for this? Can I 'hard code' the labels with css or jscript so that they will work universally throughout the page? Easier if I just post the code rather than trying to explain: <div id="blah"><input type="checkbox" id="1" checked onclick="fnchecked(this.checked);"> <ul class="menu collapsible"> <li> <a href="#"> <div class="more"><label for="1">[+]</label></div> <div class="less"><label for="1">[–]</label></div> </a> <ul class="acitem"> <BR> <li>TEXT TEXT TEXT </li> </ul></li></ul> The page I am using this with is here: http://www.paulclift.net/news.htmlBasically, I am trying to have a plus/minus symbol which ALSO activates a drop-down menu. PLEASE HELP!

Share this post


Link to post
Share on other sites

I'm really not sure what the relationship is supposed to be between the + and - symbols and the checkbox. I will say that all this looks needlessly complicated. 1. What is the anchor doing there? If you just want :hover behavior, use CSS to put a hover effect on something else. I'm thinking of the <p> I mention in #3 below. 2. What are the divs doing there? If they exist as containers that can appear and disappear, they are extra. The stuff inside them can be made to do that. 3. But you don't need that. You don't need two elements. You need one element. A simple <p> would do everything you are now doing with on link, two divs, and 2 labels. Change the <p> innerHTML from [+] to [-] each time it is clicked. Add a click event listener that checks the innerHTML of the element and do one set of behaviors if the value is [+] and another set if the value is [-]. 4. You do not need a label. The click event listener on the <p> can update the checkbox too.

Share this post


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.

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...
Sign in to follow this  

×
×
  • Create New...