SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Keep it simple, stupid! bokehman's Avatar
    Join Date
    Jul 2005
    Posts
    1,935
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox not checking

    I've got a checkbox in an li element. I put an onclick on the li element to toggle the checkbox. This works fine if I am over the li element but not over the checkbox. But if I am over the checkbox the checkbox doesn't change (or it changes twice returning it to the original state). So how do I get this working properly?

    The code below has all the relevant stuff in it I think, but here's a link to the full online version. The checkboxes are in the fourth tab. http://bokehman.com/UI-test/

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1">
    <script type="text/javascript">
    onload = layout
    
    function layout()
    {
     LIs = document.getElementById('choose').getElementsByTagName('li')
     for(i=0; i<LIs.length;i++)
     {
      LIs[i].onclick=function(){
       return toggle(this)
      } 
     }
    }
    
    function toggle(caller)
    {
     caller.firstChild.checked = !caller.firstChild.checked
     return false
    }
    </script>
    
    <title></title>
    
    </head>
    
    <body>
    
    <div id="choose">
    <ul>
    <li><input type="checkbox" name="choose[]" value="-1770"> 177.0W NSS 9</li>
    <li><input type="checkbox" name="choose[]" value="-1390"> 139.0W AMC 8</li>
    </ul>
    </div>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I essentially used your code but had no issues when it came to toggle the checkbox.

    http://jsfiddle.net/qNXVD/

  3. #3
    Keep it simple, stupid! bokehman's Avatar
    Join Date
    Jul 2005
    Posts
    1,935
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just checked your link and it doesn't work in Firefox or IE. If you put the pointer over the text it toggles the checkbox. But if you put the pointer over the checkbox itself and click it will not update the checkbox.

  4. #4
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Shouldn’t you get the input tag instead of li?

    LIs = document.getElementById('choose').getElementsByTagName('input');

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tom8 View Post
    Shouldn’t you get the input tag instead of li?

    LIs = document.getElementById('choose').getElementsByTagName('input');
    Not, his concept was to allow users to click anywhere within the LI element and have the checkbox be toggled.

    See the updated link which fixes the issue http://jsfiddle.net/g93C9/

  6. #6
    Keep it simple, stupid! bokehman's Avatar
    Join Date
    Jul 2005
    Posts
    1,935
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the help. I've just found the following does almost the same thing without any need for Javascript.

    HTML Code:
    <li><label><input type="checkbox" name="choose[]" value="-1770">177.0W NSS 9</label></li>
    <li><label><input type="checkbox" name="choose[]" value="-1390">139.0W AMC 8</label></li>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bokehman View Post
    Hi thanks for the help. I've just found the following does almost the same thing without any need for Javascript.
    Good spotting there - it is much more preferable to use non-scripted techniques where practical.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •