Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    checkbox's problem

    hi all , I'm new to js , here is my problem : i want to make a button to toggle a checkbox , here is my code ,when i replace box.checked with boxVal it doesn't work!

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <p><button>Toggle checkbox</button></p>
    <input type="checkbox" id="box"/>
    
            <script>
    
    var button = document.getElementsByTagName("button")[0];
    var box = document.getElementById("box");
    var boxVal = document.getElementById("box").checked;
    
                    button.onclick = function(){
                       if (box.checked==false){         //when i replace box.checked with boxVal  it doesn't work!
                           box.checked=true;
                       }
                        else if(box.checked==true){
                           box.checked=false;
                       }
                    }
    
      </script>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb Something to consider ...

    boxVal is set during the loading of the script.
    It does not change.
    When you click on the button a second time, the box.checked will be changed,
    but boxVal is never changed after being initialized.

    I don't know why you would want to do it this way, but if you MUST use boxVal, then try this:
    Code:
      var boxVal;
      button.onclick = function(){
        boxVal = box.checked;
        if (boxVal==false) { box.checked=true; } 
        else if(boxVal==true) { box.checked=false; }
      }

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    This looks at the status of the checkbox and then sets it to the opposite state.

    Code:
     
    <!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
            <p><button>Toggle checkbox</button></p>
            <input type="checkbox" id="box"/>
            <script type="text/javascript">
                var btn = document.getElementsByTagName("button")[0];
                var box = document.getElementById('box');
                btn.onclick = function(){
                    box.checked = (box.checked)? false : true;
                }
            </script>
        </body>
    </html>

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    i don't know why boxVal is different from box.checked as i make that boxVal = box.checked . at last i work it out , just to put "box.checked=boxVal" in the end of the function.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <p><button>Toggle checkbox</button></p>
    <input type="checkbox" id="box"/>
    
            <script>
    
    var button = document.getElementsByTagName("button")[0];
    var box = document.getElementById("box");
    var boxVal = box.checked;
    
                    button.onclick = function(){
                       if (boxVal==false){boxVal=true;}
                        else if(boxVal==true){ boxVal=false;}
                        box.checked=boxVal
                    }
    
      </script>
    </body>
    </html>

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by rupert View Post
    i don't know why boxVal is different from box.checked as i make that boxVal = box.checked . at last i work it out , just to put "box.checked=boxVal" in the end of the function.

    ...
    I indicated the problem in post #2.

    Setting the checkbox after testing it only reflects the previous state of the checkbox, not the current.

  • Users who have thanked jmrker for this post:

    rupert (07-31-2011)

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    I indicated the problem in post #2.

    Setting the checkbox after testing it only reflects the previous state of the checkbox, not the current.
    yes, i see ! thanks


  •  

    Posting Permissions

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